sea-dev 1.0.0

package/packages/widget-ng/src/lib/components/sea-pdf-viewer.component.ts

@@ -0,0 +1,869 @@
+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  OnChanges,
+  SimpleChanges,
+  ChangeDetectionStrategy,
+  signal,
+  AfterViewInit,
+  OnDestroy,
+  inject,
+  PLATFORM_ID,
+} from "@angular/core";
+import { CommonModule, DOCUMENT, isPlatformBrowser } from "@angular/common";
+import { NgxExtendedPdfViewerModule } from "ngx-extended-pdf-viewer";
+import type { Document as SeaDocument } from "../models/submission.model";
+import { SeaWidgetConfigService } from "../services/config.service";
+
+interface PdfViewportLike {
+  width: number;
+  height: number;
+  convertToViewportPoint: (x: number, y: number) => [number, number];
+}
+
+interface PdfPageViewLike {
+  div?: HTMLElement | null;
+  viewport?: PdfViewportLike;
+}
+
+interface PdfEventBusLike {
+  on: (eventName: string, listener: (...args: unknown[]) => void) => void;
+  off?: (eventName: string, listener: (...args: unknown[]) => void) => void;
+}
+
+interface PdfViewerLike {
+  container?: ParentNode | null;
+  eventBus?: PdfEventBusLike;
+  getPageView: (index: number) => PdfPageViewLike | undefined | null;
+  currentPageNumber: number;
+}
+
+interface PdfLoadedEvent {
+  source: PdfViewerLike;
+}
+
+/**
+ * PDF viewer component with citation overlays
+ * Displays PDF documents and highlights citation regions
+ */
+@Component({
+  selector: "sea-pdf-viewer",
+  standalone: true,
+  imports: [CommonModule, NgxExtendedPdfViewerModule],
+  template: `
+    <div class="sea-pdf-viewer">
+      <div class="sea-pdf-viewer__header">
+        <h3 class="sea-pdf-viewer__title">
+          {{ document?.name || "Document" }}
+        </h3>
+        <div class="sea-pdf-viewer__actions">
+          <button
+            class="sea-pdf-viewer__close"
+            (click)="onClose()"
+            type="button"
+            title="Close viewer"
+          >
+            <svg viewBox="0 0 24 24">
+              <path
+                d="M6 18L18 6M6 6l12 12"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+              />
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      <div class="sea-pdf-viewer__content">
+        @if (pdfUrl()) {
+          <div class="sea-pdf-viewer__pdf-wrapper">
+            <ngx-extended-pdf-viewer
+              [src]="pdfUrl()!"
+              [height]="'100%'"
+              [showToolbar]="true"
+              [showPresentationModeButton]="false"
+              [showOpenFileButton]="false"
+              [showPrintButton]="false"
+              [textLayer]="true"
+              [zoom]="'auto'"
+              (pagesLoaded)="onPdfLoaded($event)"
+            ></ngx-extended-pdf-viewer>
+
+            <!-- Citations are now injected directly into PDF page DOM -->
+          </div>
+        } @else {
+          <div class="sea-pdf-viewer__loading">
+            <svg class="sea-spinner" viewBox="0 0 24 24">
+              <circle
+                cx="12"
+                cy="12"
+                r="10"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="3"
+                opacity="0.25"
+              />
+              <circle
+                cx="12"
+                cy="12"
+                r="10"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="3"
+                stroke-dasharray="63"
+                stroke-dashoffset="50"
+              />
+            </svg>
+            <p>Loading PDF...</p>
+          </div>
+        }
+      </div>
+    </div>
+  `,
+  styles: [
+    `
+      .sea-pdf-viewer {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        background: #ffffff;
+        border-radius: 0;
+        box-shadow: none;
+      }
+
+      .sea-pdf-viewer__header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0.5rem 1rem;
+        border-bottom: 1px solid #e2e8f0;
+        background: #f8fafc;
+      }
+
+      .sea-pdf-viewer__title {
+        margin: 0;
+        font-size: 1.125rem;
+        font-weight: 600;
+        color: #0f172a;
+        line-height: 1.75rem;
+      }
+
+      .sea-pdf-viewer__actions {
+        display: flex;
+        gap: 8px;
+      }
+
+      .sea-pdf-viewer__close {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 2rem;
+        height: 2rem;
+        padding: 0;
+        border: 1px solid transparent;
+        background: transparent;
+        color: #64748b;
+        cursor: pointer;
+        border-radius: 0.375rem;
+        transition: all 0.2s ease;
+      }
+
+      .sea-pdf-viewer__close:hover {
+        background: #f1f5f9;
+        color: #0f172a;
+      }
+
+      .sea-pdf-viewer__close:focus-visible {
+        outline: 2px solid #3b82f6;
+        outline-offset: 2px;
+      }
+
+      .sea-pdf-viewer__close svg {
+        width: 1rem;
+        height: 1rem;
+      }
+
+      .sea-pdf-viewer__content {
+        flex: 1;
+        overflow: hidden;
+        position: relative;
+        background: #f8fafc;
+      }
+
+      .sea-pdf-viewer__pdf-wrapper {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        background: #f8fafc;
+      }
+
+      .sea-pdf-viewer__overlays {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+        z-index: 10;
+      }
+
+      .sea-pdf-viewer__highlight {
+        position: absolute;
+        background: rgba(50, 128, 255, 0.3);
+        border: 2px solid rgba(50, 128, 255, 0.6);
+        pointer-events: auto;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .sea-pdf-viewer__highlight:hover {
+        background: rgba(50, 128, 255, 0.4);
+      }
+
+      .sea-pdf-viewer__highlight--selected {
+        background: rgba(255, 0, 0, 0.3);
+        border-color: rgba(255, 0, 0, 0.6);
+      }
+
+      .sea-pdf-viewer__highlight-label {
+        font-size: 10px;
+        font-weight: bold;
+        color: white;
+        text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
+        pointer-events: none;
+      }
+
+      .sea-pdf-viewer__test-box {
+        position: absolute;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: 3px solid;
+        font-weight: bold;
+        font-size: 14px;
+        pointer-events: auto;
+      }
+
+      .sea-pdf-viewer__test-box--content {
+        background: rgba(255, 0, 0, 0.4);
+        border-color: red;
+        color: red;
+      }
+
+      .sea-pdf-viewer__test-box--wrapper {
+        background: rgba(255, 165, 0, 0.4);
+        border-color: orange;
+        color: orange;
+      }
+
+      .sea-pdf-viewer__test-box--between {
+        background: rgba(255, 255, 0, 0.4);
+        border-color: yellow;
+        color: #856404;
+      }
+
+      .sea-pdf-viewer__test-box--overlay {
+        background: rgba(0, 255, 0, 0.4);
+        border-color: green;
+        color: green;
+      }
+
+      .sea-pdf-viewer__test-box--absolute {
+        background: rgba(0, 128, 255, 0.4);
+        border-color: blue;
+        color: blue;
+      }
+
+      .sea-pdf-viewer__test-box--transform {
+        background: rgba(128, 0, 255, 0.4);
+        border-color: purple;
+        color: purple;
+      }
+
+      .sea-pdf-viewer__loading {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        color: #64748b;
+        gap: 1rem;
+      }
+
+      .sea-spinner {
+        width: 3rem;
+        height: 3rem;
+        animation: spin 1s linear infinite;
+        color: #3b82f6;
+      }
+
+      .sea-spinner circle:last-child {
+        animation: dash 1.5s ease-in-out infinite;
+        stroke-linecap: round;
+      }
+
+      @keyframes spin {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+
+      @keyframes dash {
+        0% {
+          stroke-dashoffset: 63;
+        }
+        50% {
+          stroke-dashoffset: 15;
+        }
+        100% {
+          stroke-dashoffset: 63;
+        }
+      }
+
+      .citation-tooltip {
+        position: absolute;
+        background: rgba(0, 0, 0, 0.9);
+        color: white;
+        padding: 8px 12px;
+        border-radius: 4px;
+        font-size: 12px;
+        line-height: 1.5;
+        pointer-events: none;
+        white-space: pre-line;
+        z-index: 1000000;
+        max-width: 300px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+        opacity: 0;
+        transition: opacity 0.2s ease-in-out;
+      }
+
+      .citation-tooltip.show {
+        opacity: 1;
+      }
+
+      ::ng-deep ngx-extended-pdf-viewer {
+        height: 100% !important;
+        width: 100% !important;
+        display: flex !important;
+        flex-direction: column !important;
+      }
+
+      ::ng-deep ngx-extended-pdf-viewer .ng2-pdf-viewer-container {
+        height: 100% !important;
+        width: 100% !important;
+        flex: 1 !important;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SeaPdfViewerComponent
+  implements OnChanges, AfterViewInit, OnDestroy
+{
+  @Input() document: SeaDocument | null = null;
+  @Input() selectedCitationId?: string;
+  @Output() closed = new EventEmitter<void>();
+  @Output() citationClicked = new EventEmitter<string>();
+
+  // Previously used container ViewChild removed; overlays are injected into
+  // the PDF.js page DOM directly and cleanup is scoped to the viewer container.
+
+  protected readonly pdfUrl = signal<string | null>(null);
+  protected readonly pdfLoaded = signal(false);
+
+  private isDestroyed = false;
+  private pdfViewerInstance: PdfViewerLike | null = null;
+  private isInternalCitationClick = false;
+  private cleanupFns: Array<() => void> = [];
+  private readonly config = inject(SeaWidgetConfigService);
+  private readonly platformId = inject(PLATFORM_ID);
+  private readonly documentRef = inject(DOCUMENT, {
+    optional: true,
+  }) as globalThis.Document | null;
+  private overlayByCitation = new Map<string, HTMLElement[]>();
+  private processedRegions = new Set<string>();
+
+  private debug(...args: unknown[]): void {
+    if (this.config.debug()) {
+      // eslint-disable-next-line no-console
+      console.log(...args);
+    }
+  }
+
+  private isBrowserEnvironment(): boolean {
+    return isPlatformBrowser(this.platformId);
+  }
+
+  private deferToAnimationFrame(callback: () => void): void {
+    if (!this.isBrowserEnvironment()) {
+      return;
+    }
+    const win =
+      typeof window !== "undefined" &&
+      typeof window.requestAnimationFrame === "function"
+        ? window
+        : null;
+    if (win) {
+      win.requestAnimationFrame(() => callback());
+      return;
+    }
+    setTimeout(callback, 16);
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes["document"]) {
+      // eslint-disable-next-line no-console
+      console.log("[SeaPdfViewer] Document changed:", {
+        hasDocument: !!this.document,
+        documentName: this.document?.name,
+        documentUrl: this.document?.url,
+        urlLength: this.document?.url?.length,
+      });
+      if (this.document) {
+        this.loadPdf();
+      }
+    }
+
+    if (changes["selectedCitationId"] && this.pdfLoaded()) {
+      this.debug(
+        "[SeaPdfViewer] selectedCitationId changed to:",
+        this.selectedCitationId,
+        "isInternal:",
+        this.isInternalCitationClick,
+      );
+      // Capture the flag state immediately before any async operations
+      const shouldScroll = !this.isInternalCitationClick;
+      // Reset the flag immediately after capturing its state
+      this.isInternalCitationClick = false;
+
+      // Toggle selection styling on existing overlays without reinjecting
+      this.updateOverlaySelection();
+      if (this.selectedCitationId && shouldScroll) {
+        this.scrollToCitation(this.selectedCitationId!);
+      }
+    }
+  }
+
+  ngAfterViewInit(): void {
+    // Component initialized
+  }
+
+  ngOnDestroy(): void {
+    this.isDestroyed = true;
+    // Detach listeners and clear overlays/tooltips
+    this.cleanupFns.forEach((fn) => {
+      try {
+        fn();
+      } catch {}
+    });
+    this.cleanupFns = [];
+    this.removeAllOverlays();
+    this.pdfViewerInstance = null;
+  }
+
+  private loadPdf(): void {
+    if (!this.document?.url) {
+      console.error("[SeaPdfViewer] No document URL provided", {
+        document: this.document,
+        hasDocument: !!this.document,
+        url: this.document?.url,
+      });
+      return;
+    }
+
+    // eslint-disable-next-line no-console
+    console.log("[SeaPdfViewer] Loading PDF:", {
+      url: this.document.url,
+      name: this.document.name,
+      documentId: (this.document as any).id,
+    });
+    this.pdfUrl.set(this.document.url);
+  }
+
+  protected onPdfLoaded(event: PdfLoadedEvent): void {
+    if (!this.isBrowserEnvironment()) {
+      return;
+    }
+    // Store the PDF viewer instance from the event
+    this.pdfViewerInstance = event.source;
+    this.pdfLoaded.set(true);
+
+    // Listen for page rendering events to re-inject overlays when pages are rendered
+    this.setupPageRenderListeners();
+
+    // Once initial layout has settled, inject overlays
+    this.deferToAnimationFrame(() => {
+      this.injectCitationOverlays();
+      if (this.selectedCitationId) {
+        this.scrollToCitation(this.selectedCitationId!);
+      }
+    });
+  }
+
+  private setupPageRenderListeners(): void {
+    if (!this.isBrowserEnvironment()) {
+      return;
+    }
+    const pdfViewer = this.pdfViewerInstance;
+    if (!pdfViewer?.eventBus) {
+      return;
+    }
+
+    const eventBus = pdfViewer.eventBus;
+
+    // Remove any previous listeners before re-registering
+    this.cleanupFns.forEach((fn) => fn());
+    this.cleanupFns = [];
+
+    // Re-inject overlays when PDF scale changes (zoom in/out) or a page renders
+    const reinject = () => {
+      // Defer slightly to allow layout to settle
+      this.deferToAnimationFrame(() => {
+        this.removeAllOverlays();
+        this.injectCitationOverlays();
+      });
+    };
+    eventBus.on("scalechanging", reinject);
+    eventBus.on("pagerendered", reinject);
+    this.cleanupFns.push(() => eventBus.off?.("scalechanging", reinject));
+    this.cleanupFns.push(() => eventBus.off?.("pagerendered", reinject));
+  }
+
+  private removeAllOverlays(): void {
+    const root: ParentNode | null = this.pdfViewerInstance?.container ?? null;
+    if (root) {
+      root.querySelectorAll(".citation-overlay").forEach((el) => el.remove());
+    }
+    // Clear overlay map tracking and processed regions
+    this.overlayByCitation.clear();
+    this.processedRegions.clear();
+    // Tooltips are appended to document.body; remove any lingering ones as well
+    const doc = this.documentRef;
+    if (doc) {
+      doc.querySelectorAll(".citation-tooltip").forEach((el) => el.remove());
+    }
+  }
+
+  /**
+   * Transform polygon coordinates to viewport pixel coordinates.
+   * Supports normalized [0..1], inches (converted to points), and PDF points.
+   */
+  private transformPdfCoordinates(
+    polygon: number[],
+    viewport: PdfViewportLike,
+  ): { left: number; top: number; width: number; height: number } | null {
+    if (!polygon || polygon.length < 8) return null;
+
+    const xs = [polygon[0], polygon[2], polygon[4], polygon[6]];
+    const ys = [polygon[1], polygon[3], polygon[5], polygon[7]];
+    const minX = Math.min(...xs);
+    const maxX = Math.max(...xs);
+    const minY = Math.min(...ys);
+    const maxY = Math.max(...ys);
+
+    const looksNormalized = maxX <= 1 && maxY <= 1 && minX >= 0 && minY >= 0;
+    const looksInches = !looksNormalized && maxX <= 50 && maxY <= 50; // pages are < ~50 inches
+
+    if (looksNormalized) {
+      const left = minX * viewport.width;
+      const top = minY * viewport.height;
+      const width = (maxX - minX) * viewport.width;
+      const height = (maxY - minY) * viewport.height;
+      return { left, top, width, height };
+    }
+
+    // Convert to points if input looks like inches; otherwise treat as points already
+    const x1 = looksInches ? minX * 72 : minX;
+    const y1 = looksInches ? minY * 72 : minY;
+    const x2 = looksInches ? maxX * 72 : maxX;
+    const y2 = looksInches ? maxY * 72 : maxY;
+
+    // PDF space has bottom-left origin; convert to viewport pixel space
+    const bottomLeft = viewport.convertToViewportPoint(x1, y1);
+    const topRight = viewport.convertToViewportPoint(x2, y2);
+    const left = bottomLeft[0];
+    const right = topRight[0];
+    const top = viewport.height - bottomLeft[1];
+    const bottom = viewport.height - topRight[1];
+    return { left, top, width: right - left, height: bottom - top };
+  }
+
+  private injectCitationOverlays(): void {
+    if (!this.isBrowserEnvironment()) {
+      return;
+    }
+    const pdfViewer = this.pdfViewerInstance;
+    if (
+      !pdfViewer ||
+      !this.document?.citations ||
+      this.document.citations.length === 0
+    ) {
+      return;
+    }
+
+    const doc = this.documentRef;
+    if (!doc) {
+      return;
+    }
+
+    this.document.citations.forEach((citation) => {
+      // boundingRegions is an object where keys are property names and values are arrays of regions
+      const boundingRegions = citation.boundingRegions ?? {};
+
+      // Flatten all regions and deduplicate by polygon coordinates within this citation
+      // Multiple fields in the same citation might reference the same bounding box
+      const seenRegionsInCitation = new Set<string>();
+      const allRegions = Object.values(boundingRegions)
+        .flat()
+        .filter((region) => {
+          const polygonKey = `${region.pageNumber}-${region.polygon.join(",")}`;
+          if (seenRegionsInCitation.has(polygonKey)) {
+            return false; // Skip duplicate within this citation
+          }
+          seenRegionsInCitation.add(polygonKey);
+          return true;
+        });
+
+      allRegions.forEach((region) => {
+        const pageNumber = region.pageNumber;
+        const polygon = region.polygon;
+
+        // Global deduplication across ALL citations
+        // If the exact same polygon appears in multiple citations, only render once
+        const globalKey = `${pageNumber}-${polygon.join(",")}`;
+        if (this.processedRegions.has(globalKey)) {
+          return; // Already rendered this exact region
+        }
+        this.processedRegions.add(globalKey);
+
+        // Get the page view for this region
+        const pageView = pdfViewer.getPageView(pageNumber - 1);
+        if (!pageView || !pageView.div || !pageView.viewport) {
+          return;
+        }
+
+        const pageDiv = pageView.div;
+        const viewport = pageView.viewport;
+
+        // Transform PDF coordinates to screen coordinates
+        const coords = this.transformPdfCoordinates(polygon, viewport);
+        if (!coords) {
+          return;
+        }
+
+        const { left, top, width, height } = coords;
+
+        // Create overlay element
+        const overlay = doc.createElement("div");
+        overlay.style.position = "absolute";
+        overlay.style.left = `${left}px`;
+        overlay.style.top = `${top}px`;
+        overlay.style.width = `${width}px`;
+        overlay.style.height = `${height}px`;
+        overlay.style.background = "rgba(59, 130, 246, 0.2)";
+        overlay.style.border = "1px solid rgba(59, 130, 246, 0.5)";
+        overlay.style.borderRadius = "0.25rem";
+        overlay.style.cursor = "pointer";
+        overlay.style.transition = "all 0.2s ease";
+        overlay.style.zIndex = "999999";
+        overlay.style.pointerEvents = "auto";
+        overlay.className = "citation-overlay";
+        overlay.dataset["citationId"] = citation.id;
+        overlay.dataset["pageNumber"] = pageNumber.toString();
+
+        // Create tooltip element with citation information
+        const tooltipText = [
+          `Citation: ${citation.id}`,
+          `Page: ${pageNumber}`,
+          citation.path ? `Field: ${citation.path}` : null,
+          citation.text
+            ? `Text: ${citation.text.substring(0, 100)}${citation.text.length > 100 ? "..." : ""}`
+            : null,
+        ]
+          .filter(Boolean)
+          .join("\n");
+
+        const tooltip = doc.createElement("div");
+        tooltip.className = "citation-tooltip";
+        tooltip.textContent = tooltipText;
+
+        // Add hover effect and tooltip
+        overlay.addEventListener("mouseenter", (e) => {
+          overlay.style.background = "rgba(59, 130, 246, 0.3)";
+
+          // Position tooltip near the mouse cursor
+          const mouseEvent = e as MouseEvent;
+          tooltip.style.left = `${mouseEvent.pageX + 10}px`;
+          tooltip.style.top = `${mouseEvent.pageY + 10}px`;
+          doc.body?.appendChild(tooltip);
+
+          // Show tooltip after a small delay
+          setTimeout(() => tooltip.classList.add("show"), 50);
+        });
+
+        overlay.addEventListener("mouseleave", () => {
+          const isSelected = overlay.classList.contains(
+            "citation-overlay--selected",
+          );
+          overlay.style.background = isSelected
+            ? "rgba(244, 63, 94, 0.25)"
+            : "rgba(59, 130, 246, 0.2)";
+
+          // Remove tooltip
+          tooltip.classList.remove("show");
+          setTimeout(() => {
+            if (tooltip.parentNode) {
+              tooltip.parentNode.removeChild(tooltip);
+            }
+          }, 200);
+        });
+
+        overlay.addEventListener("mousemove", (e) => {
+          const mouseEvent = e as MouseEvent;
+          tooltip.style.left = `${mouseEvent.pageX + 10}px`;
+          tooltip.style.top = `${mouseEvent.pageY + 10}px`;
+        });
+
+        // Add click handler to emit citation selection
+        overlay.addEventListener("click", () => {
+          this.debug("[SeaPdfViewer] Citation clicked:", citation.id);
+          this.onCitationClick(citation.id);
+        });
+
+        // Apply selected styling if this is the selected citation
+        if (citation.id === this.selectedCitationId) {
+          overlay.classList.add("citation-overlay--selected");
+          overlay.style.background = "rgba(244, 63, 94, 0.25)";
+          overlay.style.border = "2px solid rgba(244, 63, 94, 0.9)";
+        }
+
+        // Track overlays per citation for fast selection toggling
+        const list = this.overlayByCitation.get(citation.id) ?? [];
+        list.push(overlay);
+        this.overlayByCitation.set(citation.id, list);
+
+        pageDiv.appendChild(overlay);
+      });
+    });
+  }
+
+  private onCitationClick(citationId: string): void {
+    this.debug("[SeaPdfViewer] Citation clicked in PDF:", citationId);
+
+    // Update overlays to reflect selection state
+    this.selectedCitationId = citationId;
+    this.updateOverlaySelection();
+
+    // Mark this as an internal citation click to prevent scroll jump
+    this.isInternalCitationClick = true;
+    this.debug("[SeaPdfViewer] Set isInternalCitationClick to true");
+
+    // Emit event to notify parent component of citation selection
+    this.citationClicked.emit(citationId);
+  }
+
+  private scrollToCitation(citationId: string): void {
+    if (this.isDestroyed) {
+      return;
+    }
+
+    const citation = this.document?.citations?.find((c) => c.id === citationId);
+    if (!citation) {
+      console.warn("[SeaPdfViewer] Citation not found for ID:", citationId);
+      return;
+    }
+
+    const regions = Object.values(citation.boundingRegions || {}).flat();
+    const targetRegion = regions[0];
+
+    if (!targetRegion) {
+      console.warn("[SeaPdfViewer] No regions found for citation:", citationId);
+      return;
+    }
+
+    // Scroll to the citation's page only if we're not already on that page
+    const pdfViewer = this.pdfViewerInstance;
+    if (pdfViewer && targetRegion.pageNumber) {
+      // Only scroll if we're not already on the target page
+      if (pdfViewer.currentPageNumber !== targetRegion.pageNumber) {
+        this.debug(
+          "[SeaPdfViewer] Scrolling from page",
+          pdfViewer.currentPageNumber,
+          "to page",
+          targetRegion.pageNumber,
+        );
+        pdfViewer.currentPageNumber = targetRegion.pageNumber;
+      } else {
+        this.debug(
+          "[SeaPdfViewer] Already on target page",
+          targetRegion.pageNumber,
+          "- no scroll needed",
+        );
+      }
+    }
+  }
+
+  private updateOverlaySelection(): void {
+    if (!this.isBrowserEnvironment()) {
+      return;
+    }
+    const selectedId = this.selectedCitationId;
+    const doc = this.documentRef;
+    const scopeSource =
+      (this.pdfViewerInstance?.container as ParentNode | null | undefined) ??
+      doc;
+    if (!scopeSource) {
+      return;
+    }
+    const scope: ParentNode = scopeSource;
+
+    if (this.overlayByCitation.size > 0) {
+      // Use the tracked map when available
+      for (const [id, list] of this.overlayByCitation) {
+        const selected = id === selectedId;
+        for (const el of list) {
+          if (selected) {
+            el.classList.add("citation-overlay--selected");
+            el.style.background = "rgba(244, 63, 94, 0.25)";
+            el.style.border = "2px solid rgba(244, 63, 94, 0.9)";
+          } else {
+            el.classList.remove("citation-overlay--selected");
+            el.style.background = "rgba(59, 130, 246, 0.2)";
+            el.style.border = "1px solid rgba(59, 130, 246, 0.5)";
+          }
+        }
+      }
+      return;
+    }
+
+    // Fallback: query the DOM if the map isn't populated yet
+    const allOverlays = scope.querySelectorAll?.(".citation-overlay");
+    allOverlays?.forEach((overlay) => {
+      const el = overlay as HTMLElement;
+      const isSelected = el.dataset["citationId"] === selectedId;
+      if (isSelected) {
+        el.classList.add("citation-overlay--selected");
+        el.style.background = "rgba(244, 63, 94, 0.25)";
+        el.style.border = "2px solid rgba(244, 63, 94, 0.9)";
+      } else {
+        el.classList.remove("citation-overlay--selected");
+        el.style.background = "rgba(59, 130, 246, 0.2)";
+        el.style.border = "1px solid rgba(59, 130, 246, 0.5)";
+      }
+    });
+  }
+
+  // getCitationsForView(): no longer needed; overlays are computed and injected per page via transformPdfCoordinates()
+
+  protected onClose(): void {
+    this.closed.emit();
+  }
+}