@deepcitation/deepcitation-js 1.1.22 → 1.1.23

package/lib/react/CitationComponent.js

@@ -1,30 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef, memo, useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import { forwardRef, memo, useCallback, useEffect, useMemo, useState, } from "react";
 import { createPortal } from "react-dom";
 import { CheckIcon, WarningIcon } from "./icons.js";
-import { classNames, generateCitationInstanceId, generateCitationKey, getCitationDisplayText, } from "./utils.js";
-import { getCitationStatus } from "../parsing/parseCitation.js";
-import "./styles.css";
-const TWO_DOTS_THINKING_CONTENT = "..";
+import { Popover, PopoverContent, PopoverTrigger } from "./Popover.js";
+import { generateCitationInstanceId, generateCitationKey, getCitationDisplayText, } from "./utils.js";
+import { useSmartDiff } from "./useSmartDiff.js";
 // =============================================================================
-// INDICATORS
+// UTILITY FUNCTIONS
 // =============================================================================
-/**
- * Default indicator for verified citations (exact match).
- * Shows a green checkmark.
- */
-const DefaultVerifiedIndicator = () => (_jsx("span", { className: "dc-indicator dc-indicator--verified", "aria-hidden": "true", children: _jsx(CheckIcon, {}) }));
-/**
- * Default indicator for partial match citations.
- * Shows an orange/warning checkmark.
- */
-const DefaultPartialIndicator = () => (_jsx("span", { className: "dc-indicator dc-indicator--partial", "aria-hidden": "true", children: _jsx(CheckIcon, {}) }));
-// =============================================================================
-// HELPER FUNCTIONS
-// =============================================================================
-/**
- * Get status label for display in popover.
- */
+function cn(...classes) {
+    return classes.filter(Boolean).join(" ");
+}
 function getStatusLabel(status) {
     if (status.isVerified && !status.isPartialMatch)
         return "Verified";
@@ -37,258 +23,172 @@ function getStatusLabel(status) {
     return "";
 }
 /**
- * Get popover status CSS class.
- */
-function getPopoverStatusClass(status) {
-    if (status.isVerified && !status.isPartialMatch)
-        return "dc-popover-status--verified";
-    if (status.isPartialMatch)
-        return "dc-popover-status--partial";
-    if (status.isMiss)
-        return "dc-popover-status--miss";
-    if (status.isPending)
-        return "dc-popover-status--pending";
-    return "";
-}
-/**
- * Get the "found status" class for text styling.
- * This determines if the text appears as found (blue) or not found (gray).
- *
- * Key insight: Partial matches ARE found - they just don't match exactly.
- * So partial matches get "verified" text styling (blue) but with a different indicator.
- */
-function getFoundStatusClass(status) {
-    // Both verified AND partial are "found" - they get the same text styling
-    if (status.isVerified || status.isPartialMatch)
-        return "dc-citation--verified";
-    if (status.isMiss)
-        return "dc-citation--miss";
-    if (status.isPending)
-        return "dc-citation--pending";
-    return "";
-}
-// =============================================================================
-// SUB-COMPONENTS
-// =============================================================================
-/**
- * Status tooltip content for miss/partial states.
- * Shows explanation when hovering over citations with issues.
+ * Derive citation status from a Verification object.
+ * The status comes from verification.status.
  */
-const StatusTooltipContent = ({ citation, status, verification, isExpanded, onToggleExpand, }) => {
-    const { isMiss, isPartialMatch } = status;
-    if (!isMiss && !isPartialMatch)
-        return null;
-    // Get search attempts from verification
-    const searchAttempts = verification?.searchState?.searchAttempts;
-    const failedAttempts = searchAttempts?.filter((a) => !a.success) || [];
-    // Collect all unique phrases tried
-    const allPhrases = [];
-    const seenPhrases = new Set();
-    for (const attempt of failedAttempts) {
-        for (const phrase of attempt.searchPhrases || []) {
-            if (!seenPhrases.has(phrase)) {
-                seenPhrases.add(phrase);
-                allPhrases.push(phrase);
-            }
-        }
-    }
-    // Fallback to citation text if no phrases recorded
-    if (allPhrases.length === 0) {
-        const searchedText = citation.fullPhrase || citation.keySpan?.toString() || "";
-        if (searchedText) {
-            allPhrases.push(searchedText);
-        }
-    }
-    if (isMiss) {
-        const hiddenCount = allPhrases.length - 1;
-        return (_jsxs("span", { className: "dc-status-tooltip", role: "tooltip", children: [_jsxs("span", { className: "dc-status-header dc-status-header--miss", children: [_jsx(WarningIcon, {}), _jsx("span", { children: "Not found in source" })] }), allPhrases.length > 0 && (_jsxs("span", { className: "dc-search-phrases", children: [_jsxs("span", { className: "dc-search-phrases-header", children: [hiddenCount > 0 && (_jsx("button", { type: "button", className: "dc-search-phrases-toggle", onClick: onToggleExpand, children: isExpanded ? "collapse" : `+${hiddenCount} more` })), _jsxs("span", { className: "dc-status-label", children: ["Searched ", allPhrases.length, " phrase", allPhrases.length > 1 ? "s" : ""] })] }), _jsx("span", { className: "dc-search-phrases-list", children: (isExpanded ? allPhrases : allPhrases.slice(0, 1)).map((phrase, idx) => (_jsxs("span", { className: "dc-search-phrase-item", children: ["\"", phrase.length > 80 ? phrase.slice(0, 80) + "…" : phrase, "\""] }, idx))) })] }))] }));
+function getStatusFromVerification(verification) {
+    const status = verification?.status;
+    // No verification or no status = pending
+    if (!verification || !status) {
+        return { isVerified: false, isMiss: false, isPartialMatch: false, isPending: true };
     }
-    if (isPartialMatch) {
-        const expectedText = citation.fullPhrase || citation.keySpan?.toString() || "";
-        const actualText = verification?.matchSnippet || "";
-        const textMatches = expectedText === actualText;
-        const truncatedExpected = expectedText.length > 100
-            ? expectedText.slice(0, 100) + "…"
-            : expectedText;
-        const truncatedActual = actualText.length > 100 ? actualText.slice(0, 100) + "…" : actualText;
-        // Check for line ID and page number differences
-        const expectedLineIds = citation.lineIds;
-        const actualLineIds = verification?.lineIds;
-        const lineIdDiffers = expectedLineIds &&
-            actualLineIds &&
-            JSON.stringify(expectedLineIds) !== JSON.stringify(actualLineIds);
-        const expectedPage = citation.pageNumber;
-        const actualPage = verification?.pageNumber;
-        const pageDiffers = expectedPage != null &&
-            actualPage != null &&
-            expectedPage !== actualPage;
-        return (_jsxs("span", { className: "dc-status-tooltip", role: "tooltip", children: [_jsxs("span", { className: "dc-status-header dc-status-header--partial", children: [_jsx(WarningIcon, {}), _jsx("span", { children: "Partial match" })] }), textMatches ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "dc-status-description", children: "Text matches, but location differs." }), truncatedExpected && (_jsxs("span", { className: "dc-status-searched", children: [_jsx("span", { className: "dc-status-label", children: "Text" }), _jsx("span", { className: "dc-status-text", children: truncatedExpected })] }))] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "dc-status-description", children: "Text differs from citation." }), truncatedExpected && (_jsxs("span", { className: "dc-status-searched", children: [_jsx("span", { className: "dc-status-label", children: "Expected" }), _jsx("span", { className: "dc-status-text dc-status-text--expected", children: truncatedExpected })] })), truncatedActual && (_jsxs("span", { className: "dc-status-searched", children: [_jsx("span", { className: "dc-status-label", children: "Found" }), _jsx("span", { className: "dc-status-text", children: truncatedActual })] }))] })), pageDiffers && (_jsxs("span", { className: "dc-status-searched", children: [_jsx("span", { className: "dc-status-label", children: "Page" }), _jsxs("span", { className: "dc-status-text", children: [_jsx("span", { className: "dc-status-text--expected", children: expectedPage }), " → ", actualPage] })] })), lineIdDiffers && (_jsxs("span", { className: "dc-status-searched", children: [_jsx("span", { className: "dc-status-label", children: "Line" }), _jsxs("span", { className: "dc-status-text", children: [_jsx("span", { className: "dc-status-text--expected", children: expectedLineIds?.join(", ") }), " → ", actualLineIds?.join(", ")] })] }))] }));
-    }
-    return null;
-};
+    const isMiss = status === "not_found";
+    const isPending = status === "pending" || status === "loading";
+    const isPartialMatch = status === "partial_text_found" ||
+        status === "found_on_other_page" ||
+        status === "found_on_other_line" ||
+        status === "first_word_found";
+    const isVerified = status === "found" ||
+        status === "found_key_span_only" ||
+        status === "found_phrase_missed_value" ||
+        isPartialMatch;
+    return { isVerified, isMiss, isPartialMatch, isPending };
+}
 /**
- * Full-size image overlay component.
- * Uses portal to render at document body level.
+ * Full-screen image overlay for zoomed verification images.
+ * Click anywhere or press Escape to close.
  */
-const ImageOverlay = ({ src, alt, onClose, }) => {
-    const handleBackdropClick = useCallback((e) => {
-        if (e.target === e.currentTarget) {
-            onClose();
-        }
-    }, [onClose]);
+function ImageOverlay({ src, alt, onClose }) {
     useEffect(() => {
         const handleKeyDown = (e) => {
-            if (e.key === "Escape") {
+            if (e.key === "Escape")
                 onClose();
-            }
         };
         document.addEventListener("keydown", handleKeyDown);
         return () => document.removeEventListener("keydown", handleKeyDown);
     }, [onClose]);
-    // Use portal to render at body level, avoiding any parent positioning issues
-    return createPortal(_jsx("div", { className: "dc-overlay", onClick: handleBackdropClick, role: "dialog", "aria-modal": "true", "aria-label": "Full size verification image", children: _jsx("div", { className: "dc-overlay-content", onClick: onClose, children: _jsx("img", { src: src, alt: alt, className: "dc-overlay-image", draggable: false }) }) }), document.body);
-};
+    return createPortal(_jsx("div", { className: "fixed inset-0 z-[9999] flex items-center justify-center bg-black/80 backdrop-blur-sm animate-in fade-in-0", onClick: onClose, role: "dialog", "aria-modal": "true", "aria-label": "Full size verification image", children: _jsx("div", { className: "relative max-w-[95vw] max-h-[95vh] cursor-zoom-out", children: _jsx("img", { src: src, alt: alt, className: "max-w-full max-h-[95vh] object-contain rounded-lg shadow-2xl", draggable: false }) }) }), document.body);
+}
+// =============================================================================
+// INDICATOR COMPONENTS
+// =============================================================================
+//
+// Status indicators show the verification state visually:
+//
+// | Status        | Indicator          | Color  | searchState.status values                    |
+// |---------------|--------------------| -------|----------------------------------------------|
+// | Pending       | Spinner            | Gray   | "pending", "loading", null/undefined         |
+// | Verified      | Checkmark (✓)      | Green  | "found", "found_key_span_only", etc.         |
+// | Partial Match | Checkmark (✓)      | Amber  | "found_on_other_page", "partial_text_found"  |
+// | Not Found     | Warning triangle   | Red    | "not_found"                                  |
+//
+// Use `renderIndicator` prop to customize. Use `variant="indicator"` to show only the icon.
+// =============================================================================
+/** Spinner component for loading/pending state */
+const Spinner = ({ className }) => (_jsxs("svg", { className: cn("animate-spin", className), xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", width: "12", height: "12", children: [_jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), _jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] }));
+/** Verified indicator - green checkmark for exact matches */
+const VerifiedIndicator = () => (_jsx("span", { className: "inline-flex relative ml-0.5 text-green-600 dark:text-green-500", "aria-hidden": "true", children: _jsx(CheckIcon, {}) }));
+/** Partial match indicator - amber checkmark for partial/relocated matches */
+const PartialIndicator = () => (_jsx("span", { className: "inline-flex relative ml-0.5 text-amber-600 dark:text-amber-500", "aria-hidden": "true", children: _jsx(CheckIcon, {}) }));
+/** Pending indicator - spinner for loading state */
+const PendingIndicator = () => (_jsx("span", { className: "inline-flex ml-1 text-gray-400 dark:text-gray-500", "aria-hidden": "true", children: _jsx(Spinner, {}) }));
+/** Miss indicator - red warning triangle for not found */
+const MissIndicator = () => (_jsx("span", { className: "inline-flex relative ml-0.5 text-red-500 dark:text-red-400", "aria-hidden": "true", children: _jsx(WarningIcon, {}) }));
+function DefaultPopoverContent({ citation, verification, status, onImageClick, }) {
+    const hasImage = verification?.verificationImageBase64;
+    const { isMiss, isPartialMatch } = status;
+    // Image view
+    if (hasImage) {
+        return (_jsxs("div", { className: "p-1", children: [_jsx("button", { type: "button", className: "block cursor-zoom-in", onClick: (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        onImageClick?.();
+                    }, "aria-label": "Click to view full size", children: _jsx("img", { src: verification.verificationImageBase64, alt: "Citation verification", className: "max-w-[700px] max-h-[500px] w-auto h-auto object-contain rounded bg-gray-50 dark:bg-gray-800", loading: "lazy" }) }), (isMiss || isPartialMatch) && (_jsx(DiffDetails, { citation: citation, verification: verification, status: status }))] }));
+    }
+    // Text-only view
+    const statusLabel = getStatusLabel(status);
+    const hasSnippet = verification?.verifiedMatchSnippet;
+    const pageNumber = verification?.verifiedPageNumber;
+    if (!hasSnippet && !statusLabel)
+        return null;
+    return (_jsxs("div", { className: "p-3 flex flex-col gap-2 min-w-[200px] max-w-[400px]", children: [statusLabel && (_jsx("span", { className: cn("text-xs font-medium", status.isVerified && !status.isPartialMatch && "text-green-600 dark:text-green-500", status.isPartialMatch && "text-amber-600 dark:text-amber-500", status.isMiss && "text-red-600 dark:text-red-500", status.isPending && "text-gray-500 dark:text-gray-400"), children: statusLabel })), hasSnippet && (_jsxs("span", { className: "text-sm text-gray-700 dark:text-gray-300 italic", children: ["\"", verification.verifiedMatchSnippet, "\""] })), pageNumber && pageNumber > 0 && (_jsxs("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: ["Page ", pageNumber] })), (isMiss || isPartialMatch) && (_jsx(DiffDetails, { citation: citation, verification: verification, status: status }))] }));
+}
+// =============================================================================
+// DIFF DETAILS COMPONENT
+// =============================================================================
 /**
- * Diff details for partial/miss verification states.
- * Shows expected vs found text, and location differences when applicable.
+ * Renders diff highlighting between expected citation text and actual found text.
+ * Uses the `diff` library via useSmartDiff hook for word-level highlighting.
  */
-const DiffDetails = ({ citation, verification, status, }) => {
+function DiffDetails({ citation, verification, status, }) {
     const { isMiss, isPartialMatch } = status;
+    const expectedText = citation.fullPhrase || citation.keySpan?.toString() || "";
+    const actualText = verification?.verifiedMatchSnippet || "";
+    // Use the diff library for smart word-level diffing
+    const { diffResult, hasDiff, isHighVariance } = useSmartDiff(expectedText, actualText);
     if (!isMiss && !isPartialMatch)
         return null;
-    const expectedText = citation.fullPhrase || citation.keySpan?.toString() || "";
-    const actualText = verification?.matchSnippet || "";
-    const textMatches = expectedText === actualText;
-    const truncatedExpected = expectedText.length > 100 ? expectedText.slice(0, 100) + "…" : expectedText;
-    const truncatedActual = actualText.length > 100 ? actualText.slice(0, 100) + "…" : actualText;
-    // Check for line ID and page number differences
     const expectedLineIds = citation.lineIds;
-    const actualLineIds = verification?.lineIds;
+    const actualLineIds = verification?.verifiedLineIds;
     const lineIdDiffers = expectedLineIds &&
         actualLineIds &&
         JSON.stringify(expectedLineIds) !== JSON.stringify(actualLineIds);
     const expectedPage = citation.pageNumber;
-    const actualPage = verification?.pageNumber;
-    const pageDiffers = expectedPage != null &&
-        actualPage != null &&
-        expectedPage !== actualPage;
-    return (_jsxs("span", { className: "dc-diff-details", children: [isPartialMatch && textMatches ? (
-            // Text matches but location differs - show text once
-            truncatedExpected && (_jsxs("span", { className: "dc-status-searched", children: [_jsx("span", { className: "dc-status-label", children: "Text" }), _jsx("span", { className: "dc-status-text", children: truncatedExpected })] }))) : (
-            // Text differs - show expected and found
-            _jsxs(_Fragment, { children: [truncatedExpected && (_jsxs("span", { className: "dc-status-searched", children: [_jsx("span", { className: "dc-status-label", children: "Expected" }), _jsx("span", { className: "dc-status-text dc-status-text--expected", children: truncatedExpected })] })), isPartialMatch && truncatedActual && (_jsxs("span", { className: "dc-status-searched", children: [_jsx("span", { className: "dc-status-label", children: "Found" }), _jsx("span", { className: "dc-status-text", children: truncatedActual })] }))] })), isMiss && (_jsxs("span", { className: "dc-status-searched", children: [_jsx("span", { className: "dc-status-label", children: "Found" }), _jsx("span", { className: "dc-status-text dc-status-text--miss", children: "Not found in source" })] })), pageDiffers && (_jsxs("span", { className: "dc-status-searched", children: [_jsx("span", { className: "dc-status-label", children: "Page" }), _jsxs("span", { className: "dc-status-text", children: [_jsx("span", { className: "dc-status-text--expected", children: expectedPage }), " → ", actualPage] })] })), lineIdDiffers && (_jsxs("span", { className: "dc-status-searched", children: [_jsx("span", { className: "dc-status-label", children: "Line" }), _jsxs("span", { className: "dc-status-text", children: [_jsx("span", { className: "dc-status-text--expected", children: expectedLineIds?.join(", ") }), " → ", actualLineIds?.join(", ")] })] }))] }));
-};
-/**
- * Default popover content component.
- * Shows verification image if available, otherwise shows text info.
- * For partial/miss states, also displays expected vs found details.
- */
-const DefaultPopoverContent = ({ citation, verification, status, onImageClick, }) => {
-    const hasImage = verification?.verificationImageBase64;
-    const { isMiss, isPartialMatch } = status;
-    const handleImageClick = useCallback((e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        if (hasImage && onImageClick) {
-            onImageClick(verification.verificationImageBase64);
-        }
-    }, [hasImage, verification?.verificationImageBase64, onImageClick]);
-    // If we have a verification image, show image + diff details for partial/miss
-    if (hasImage) {
-        return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "dc-popover-image-button", onClick: handleImageClick, "aria-label": "Click to view full size", children: _jsx("img", { src: verification.verificationImageBase64, alt: "Citation verification", className: "dc-popover-image", loading: "lazy" }) }), (isMiss || isPartialMatch) && (_jsx(DiffDetails, { citation: citation, verification: verification, status: status }))] }));
-    }
-    // No image - show text info
-    const statusLabel = getStatusLabel(status);
-    const statusClass = getPopoverStatusClass(status);
-    const hasSnippet = verification?.matchSnippet;
-    const pageNumber = verification?.pageNumber;
-    if (!hasSnippet && !statusLabel) {
-        return null;
+    const actualPage = verification?.verifiedPageNumber;
+    const pageDiffers = expectedPage != null && actualPage != null && expectedPage !== actualPage;
+    // For "not_found" status, show expected text and "Not found" message
+    if (isMiss) {
+        return (_jsxs("div", { className: "mt-2 pt-2 border-t border-gray-200 dark:border-gray-700 text-xs space-y-2", children: [expectedText && (_jsxs("div", { children: [_jsx("span", { className: "text-gray-500 dark:text-gray-400 font-medium uppercase text-[10px]", children: "Expected" }), _jsx("p", { className: "mt-1 p-2 bg-gray-100 dark:bg-gray-800 rounded font-mono text-[11px] break-words text-red-600 dark:text-red-400 line-through opacity-70", children: expectedText.length > 100 ? expectedText.slice(0, 100) + "…" : expectedText })] })), _jsxs("div", { children: [_jsx("span", { className: "text-gray-500 dark:text-gray-400 font-medium uppercase text-[10px]", children: "Found" }), _jsx("p", { className: "mt-1 p-2 bg-gray-100 dark:bg-gray-800 rounded font-mono text-[11px] text-amber-600 dark:text-amber-500 italic", children: "Not found in source" })] })] }));
     }
-    return (_jsxs(_Fragment, { children: [statusLabel && (_jsx("span", { className: classNames("dc-popover-status", statusClass), children: statusLabel })), hasSnippet && (_jsxs("span", { className: "dc-popover-snippet", children: ["\"", verification.matchSnippet, "\""] })), pageNumber && pageNumber > 0 && (_jsxs("span", { className: "dc-popover-page", children: ["Page ", pageNumber] })), (isMiss || isPartialMatch) && (_jsx(DiffDetails, { citation: citation, verification: verification, status: status }))] }));
-};
+    // For partial matches, show word-level diff
+    return (_jsxs("div", { className: "mt-2 pt-2 border-t border-gray-200 dark:border-gray-700 text-xs space-y-2", children: [expectedText && actualText && hasDiff ? (_jsxs("div", { children: [_jsx("span", { className: "text-gray-500 dark:text-gray-400 font-medium uppercase text-[10px]", children: "Diff" }), _jsx("div", { className: "mt-1 p-2 bg-gray-100 dark:bg-gray-800 rounded font-mono text-[11px] break-words text-gray-700 dark:text-gray-300", children: isHighVariance ? (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { children: [_jsx("span", { className: "text-gray-500 dark:text-gray-400 text-[10px]", children: "Expected: " }), _jsx("span", { className: "text-red-600 dark:text-red-400 line-through opacity-70", children: expectedText.length > 100 ? expectedText.slice(0, 100) + "…" : expectedText })] }), _jsxs("div", { children: [_jsx("span", { className: "text-gray-500 dark:text-gray-400 text-[10px]", children: "Found: " }), _jsx("span", { className: "text-green-600 dark:text-green-400", children: actualText.length > 100 ? actualText.slice(0, 100) + "…" : actualText })] })] })) : (
+                        // Inline word-level diff
+                        diffResult.map((block, blockIndex) => (_jsx("span", { children: block.parts.map((part, partIndex) => {
+                                const key = `p-${blockIndex}-${partIndex}`;
+                                if (part.removed) {
+                                    return (_jsx("span", { className: "bg-red-200 dark:bg-red-900/50 text-red-700 dark:text-red-300 line-through", title: "Expected text", children: part.value }, key));
+                                }
+                                if (part.added) {
+                                    return (_jsx("span", { className: "bg-green-200 dark:bg-green-900/50 text-green-700 dark:text-green-300", title: "Actual text found", children: part.value }, key));
+                                }
+                                // Unchanged text
+                                return _jsx("span", { children: part.value }, key);
+                            }) }, `block-${blockIndex}`)))) })] })) : expectedText && !hasDiff ? (
+            // Text matches exactly (partial match is due to location difference)
+            _jsxs("div", { children: [_jsx("span", { className: "text-gray-500 dark:text-gray-400 font-medium uppercase text-[10px]", children: "Text" }), _jsx("p", { className: "mt-1 p-2 bg-gray-100 dark:bg-gray-800 rounded font-mono text-[11px] break-words text-gray-700 dark:text-gray-300", children: expectedText.length > 100 ? expectedText.slice(0, 100) + "…" : expectedText })] })) : null, pageDiffers && (_jsxs("div", { children: [_jsx("span", { className: "text-gray-500 dark:text-gray-400 font-medium uppercase text-[10px]", children: "Page" }), _jsxs("p", { className: "mt-1 font-mono text-[11px] text-gray-700 dark:text-gray-300", children: [_jsx("span", { className: "text-red-600 dark:text-red-400 line-through opacity-70", children: expectedPage }), " → ", actualPage] })] })), lineIdDiffers && (_jsxs("div", { children: [_jsx("span", { className: "text-gray-500 dark:text-gray-400 font-medium uppercase text-[10px]", children: "Line" }), _jsxs("p", { className: "mt-1 font-mono text-[11px] text-gray-700 dark:text-gray-300", children: [_jsx("span", { className: "text-red-600 dark:text-red-400 line-through opacity-70", children: expectedLineIds?.join(", ") }), " → ", actualLineIds?.join(", ")] })] }))] }));
+}
 // =============================================================================
 // MAIN COMPONENT
 // =============================================================================
 /**
  * CitationComponent displays a citation with verification status.
  *
- * The component separates two concepts:
- * 1. **Found status** (text styling) - whether the citation was found in the document
- *    - Verified & Partial both use "found" styling (blue text)
- *    - Miss uses "not found" styling (gray/strikethrough)
+ * ## Interaction Pattern
+ *
+ * - **Hover**: Shows popover with verification image or details
+ * - **Click**: Opens full-size image overlay (if image available)
+ * - **Escape / Click overlay**: Closes the image overlay
  *
- * 2. **Match quality** (indicator styling) - how well the citation matched
- *    - Exact match: green checkmark
- *    - Partial match: orange checkmark
- *    - Miss: no indicator
+ * ## Customization
  *
- * This means partial matches have blue text (because they were found) but
- * an orange indicator (because they didn't match exactly).
+ * Use `behaviorConfig.onClick` to completely replace the click behavior,
+ * or `eventHandlers.onClick` to add side effects (which disables defaults).
  */
 export const CitationComponent = forwardRef(({ citation, children, className, hideKeySpan = false, hideBrackets = false, fallbackDisplay, verification, variant = "brackets", eventHandlers, behaviorConfig, isMobile = false, renderIndicator, renderContent, popoverPosition = "top", renderPopoverContent, }, ref) => {
-    const containerRef = useRef(null);
-    const wrapperRef = useRef(null);
+    const [isHovering, setIsHovering] = useState(false);
     const [expandedImageSrc, setExpandedImageSrc] = useState(null);
-    const [isTooltipExpanded, setIsTooltipExpanded] = useState(false);
-    const [isPhrasesExpanded, setIsPhrasesExpanded] = useState(false);
-    const handleImageClick = useCallback((imageSrc) => {
-        setExpandedImageSrc(imageSrc);
-    }, []);
-    const handleCloseOverlay = useCallback(() => {
-        setExpandedImageSrc(null);
-    }, []);
-    const handleTogglePhrases = useCallback((e) => {
-        e?.preventDefault();
-        e?.stopPropagation();
-        setIsPhrasesExpanded((prev) => !prev);
-    }, []);
-    // Handle click outside to close expanded tooltip
-    useEffect(() => {
-        if (!isTooltipExpanded)
-            return;
-        const handleClickOutside = (event) => {
-            if (wrapperRef.current &&
-                !wrapperRef.current.contains(event.target)) {
-                setIsTooltipExpanded(false);
-            }
-        };
-        // Use capture phase to handle clicks before they bubble
-        document.addEventListener("mousedown", handleClickOutside, true);
-        return () => {
-            document.removeEventListener("mousedown", handleClickOutside, true);
-        };
-    }, [isTooltipExpanded]);
-    // Handle escape key to close expanded tooltip
-    useEffect(() => {
-        if (!isTooltipExpanded)
-            return;
-        const handleEscape = (event) => {
-            if (event.key === "Escape") {
-                setIsTooltipExpanded(false);
-            }
-        };
-        document.addEventListener("keydown", handleEscape);
-        return () => {
-            document.removeEventListener("keydown", handleEscape);
-        };
-    }, [isTooltipExpanded]);
     const citationKey = useMemo(() => generateCitationKey(citation), [citation]);
     const citationInstanceId = useMemo(() => generateCitationInstanceId(citationKey), [citationKey]);
-    // Create behavior context for custom handlers
+    // Derive status from verification object
+    const status = useMemo(() => getStatusFromVerification(verification), [verification]);
+    const { isMiss, isPartialMatch, isVerified, isPending } = status;
+    const displayText = useMemo(() => {
+        return getCitationDisplayText(citation, {
+            hideKeySpan: variant !== "text" && variant !== "minimal" && hideKeySpan,
+            fallbackDisplay,
+        });
+    }, [citation, variant, hideKeySpan, fallbackDisplay]);
+    // Behavior context for custom handlers
     const getBehaviorContext = useCallback(() => ({
         citation,
         citationKey,
         verification: verification ?? null,
-        isTooltipExpanded,
+        isTooltipExpanded: isHovering,
         isImageExpanded: !!expandedImageSrc,
         hasImage: !!verification?.verificationImageBase64,
-    }), [citation, citationKey, verification, isTooltipExpanded, expandedImageSrc]);
+    }), [citation, citationKey, verification, isHovering, expandedImageSrc]);
     // Apply behavior actions from custom handler
     const applyBehaviorActions = useCallback((actions) => {
-        if (actions.setTooltipExpanded !== undefined) {
-            setIsTooltipExpanded(actions.setTooltipExpanded);
-        }
         if (actions.setImageExpanded !== undefined) {
             if (typeof actions.setImageExpanded === "string") {
                 setExpandedImageSrc(actions.setImageExpanded);
@@ -300,94 +200,55 @@ export const CitationComponent = forwardRef(({ citation, children, className, hi
                 setExpandedImageSrc(null);
             }
         }
-        if (actions.setPhrasesExpanded !== undefined) {
-            setIsPhrasesExpanded(actions.setPhrasesExpanded);
-        }
     }, [verification?.verificationImageBase64]);
-    const handleToggleTooltip = useCallback((e) => {
+    // Click handler
+    const handleClick = useCallback((e) => {
         e.preventDefault();
         e.stopPropagation();
         const context = getBehaviorContext();
-        // If custom onClick handler is provided via behaviorConfig, it REPLACES default behavior
+        // Custom onClick via behaviorConfig replaces default
         if (behaviorConfig?.onClick) {
             const result = behaviorConfig.onClick(context, e);
-            // If custom handler returns actions, apply them
             if (result && typeof result === "object") {
                 applyBehaviorActions(result);
             }
-            // If returns false or void, no state changes
-            // Always call eventHandlers.onClick regardless of custom behavior
             eventHandlers?.onClick?.(citation, citationKey, e);
             return;
         }
-        // If eventHandlers.onClick is provided, disable default click behavior
-        // (no popover pinning, no image expansion) - just call the handler
+        // Custom eventHandlers.onClick disables default
         if (eventHandlers?.onClick) {
             eventHandlers.onClick(citation, citationKey, e);
             return;
         }
-        // Default click behavior (only runs when no click handlers are provided)
+        // Default: click opens image if available
         if (verification?.verificationImageBase64) {
-            if (expandedImageSrc) {
-                // Image is open - close it and unpin
-                setExpandedImageSrc(null);
-                setIsTooltipExpanded(false);
-            }
-            else if (isTooltipExpanded) {
-                // Already pinned - second click expands image
-                setExpandedImageSrc(verification.verificationImageBase64);
-            }
-            else {
-                // First click - pin the popover open
-                setIsTooltipExpanded(true);
-            }
-        }
-        else {
-            // No image - toggle phrases expansion for miss/partial tooltips
-            setIsTooltipExpanded((prev) => !prev);
-            setIsPhrasesExpanded((prev) => !prev);
+            setExpandedImageSrc(verification.verificationImageBase64);
         }
     }, [
-        eventHandlers,
         behaviorConfig,
+        eventHandlers,
         citation,
         citationKey,
         verification?.verificationImageBase64,
-        expandedImageSrc,
-        isTooltipExpanded,
         getBehaviorContext,
         applyBehaviorActions,
     ]);
-    const status = getCitationStatus(verification ?? null);
-    // const { isVerified, isPending } = status;
-    const { isMiss, isPartialMatch, isVerified, isPending } = status;
-    const displayText = useMemo(() => {
-        // For text/minimal variants, always show keySpan (hideKeySpan is ignored)
-        // For brackets variant, show keySpan based on hideKeySpan prop
-        return getCitationDisplayText(citation, {
-            hideKeySpan: variant !== "text" &&
-                variant !== "minimal" &&
-                hideKeySpan,
-            fallbackDisplay,
-        });
-    }, [citation, variant, hideKeySpan, fallbackDisplay]);
-    // Found status class for text styling (blue for found, gray for miss)
-    const foundStatusClass = useMemo(() => getFoundStatusClass(status), [status]);
-    // Event handlers
+    // Hover handlers
     const handleMouseEnter = useCallback(() => {
-        // Call custom onHover.onEnter handler (if provided)
+        setIsHovering(true);
         if (behaviorConfig?.onHover?.onEnter) {
             behaviorConfig.onHover.onEnter(getBehaviorContext());
         }
         eventHandlers?.onMouseEnter?.(citation, citationKey);
     }, [eventHandlers, behaviorConfig, citation, citationKey, getBehaviorContext]);
     const handleMouseLeave = useCallback(() => {
-        // Call custom onHover.onLeave handler (if provided)
+        setIsHovering(false);
         if (behaviorConfig?.onHover?.onLeave) {
             behaviorConfig.onHover.onLeave(getBehaviorContext());
         }
         eventHandlers?.onMouseLeave?.(citation, citationKey);
     }, [eventHandlers, behaviorConfig, citation, citationKey, getBehaviorContext]);
+    // Touch handler for mobile
     const handleTouchEnd = useCallback((e) => {
         if (isMobile) {
             e.preventDefault();
@@ -396,35 +257,34 @@ export const CitationComponent = forwardRef(({ citation, children, className, hi
         }
     }, [eventHandlers, citation, citationKey, isMobile]);
     // Early return for miss with fallback display
-    if (fallbackDisplay !== null &&
-        fallbackDisplay !== undefined &&
-        !hideKeySpan &&
-        isMiss) {
-        return (_jsx("span", { className: classNames("dc-citation-fallback", className), children: fallbackDisplay }));
+    if (fallbackDisplay !== null && fallbackDisplay !== undefined && !hideKeySpan && isMiss) {
+        return (_jsx("span", { className: cn("text-gray-400 dark:text-gray-500", className), children: fallbackDisplay }));
     }
-    // Render the appropriate indicator based on match quality
+    // Status classes for text styling
+    const statusClasses = cn(
+    // Found status (text color) - verified or partial match
+    (isVerified || isPartialMatch) && variant === "brackets" && "text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 hover:underline", isMiss && "opacity-70 line-through text-gray-400 dark:text-gray-500", isPending && "text-gray-500 dark:text-gray-400");
+    // Render indicator based on status priority:
+    // 1. Custom renderIndicator (if provided)
+    // 2. Pending → Spinner
+    // 3. Miss → Warning triangle
+    // 4. Partial match → Amber checkmark
+    // 5. Verified → Green checkmark
     const renderStatusIndicator = () => {
-        if (renderIndicator) {
+        if (renderIndicator)
             return renderIndicator(status);
-        }
-        // Check partial match first since isVerified includes isPartialMatch
-        if (isPartialMatch) {
-            return _jsx(DefaultPartialIndicator, {});
-        }
-        else if (isVerified) {
-            return _jsx(DefaultVerifiedIndicator, {});
-        }
-        else if (isPending) {
-            return (_jsx("span", { className: "dc-indicator dc-indicator--pending", "aria-hidden": "true", children: TWO_DOTS_THINKING_CONTENT }));
-        }
-        else if (isMiss) {
-            return null;
-        }
+        if (isPending)
+            return _jsx(PendingIndicator, {});
+        if (isMiss)
+            return _jsx(MissIndicator, {});
+        if (isPartialMatch)
+            return _jsx(PartialIndicator, {});
+        if (isVerified)
+            return _jsx(VerifiedIndicator, {});
         return null;
     };
-    // Render the citation content based on variant
+    // Render citation content
     const renderCitationContent = () => {
-        // Custom render function takes full control
         if (renderContent) {
             return renderContent({
                 citation,
@@ -434,54 +294,52 @@ export const CitationComponent = forwardRef(({ citation, children, className, hi
                 isMergedDisplay: variant === "text" || variant === "brackets" || !hideKeySpan,
             });
         }
-        // Indicator-only variant - just the checkmark/warning
         if (variant === "indicator") {
-            return (_jsx("span", { className: "dc-citation-text", children: renderStatusIndicator() }));
+            return _jsx("span", { children: renderStatusIndicator() });
         }
-        // Text variant - no special styling, shows keySpan with indicator
         if (variant === "text") {
-            return (_jsxs("span", { className: "dc-citation-text dc-citation-text--plain", children: [displayText, renderStatusIndicator()] }));
+            return (_jsxs("span", { className: statusClasses, children: [displayText, renderStatusIndicator()] }));
         }
-        // Minimal variant - no brackets, just text with indicator
         if (variant === "minimal") {
-            return (_jsxs("span", { className: "dc-citation-text", children: [displayText, renderStatusIndicator()] }));
+            return (_jsxs("span", { className: cn("max-w-80 overflow-hidden text-ellipsis", statusClasses), children: [displayText, renderStatusIndicator()] }));
         }
-        // Brackets variant (default) - keySpan/number in brackets with styling
-        return (_jsxs("span", { className: "dc-citation-bracket", "aria-hidden": "true", role: "presentation", children: [!hideBrackets && "[", _jsxs("span", { className: "dc-citation-text", children: [displayText, renderStatusIndicator()] }), !hideBrackets && "]"] }));
+        // brackets variant (default)
+        return (_jsxs("span", { className: cn("inline-flex items-baseline gap-0.5 whitespace-nowrap", "font-mono text-xs leading-tight", "text-gray-500 dark:text-gray-400", "transition-colors"), "aria-hidden": "true", children: [!hideBrackets && "[", _jsxs("span", { className: cn("max-w-80 overflow-hidden text-ellipsis", statusClasses), children: [displayText, renderStatusIndicator()] }), !hideBrackets && "]"] }));
     };
-    // Determine if popover should be shown
+    // Popover visibility
     const isPopoverHidden = popoverPosition === "hidden";
     const shouldShowPopover = !isPopoverHidden &&
         verification &&
-        (verification.verificationImageBase64 || verification.matchSnippet);
-    // Determine if status tooltip should be shown (miss/partial without full verification)
-    const shouldShowStatusTooltip = !isPopoverHidden && (isMiss || isPartialMatch) && !shouldShowPopover;
-    // Popover content - determine position class (only "top" or "bottom" add classes)
-    const popoverPositionClass = popoverPosition === "bottom" ? "dc-popover--bottom" : "";
-    const popoverContent = shouldShowPopover ? (_jsx("span", { className: classNames("dc-popover", popoverPositionClass), children: renderPopoverContent ? (renderPopoverContent({
+        (verification.verificationImageBase64 || verification.verifiedMatchSnippet);
+    const hasImage = !!verification?.verificationImageBase64;
+    // Image overlay
+    const imageOverlay = expandedImageSrc ? (_jsx(ImageOverlay, { src: expandedImageSrc, alt: "Citation verification - full size", onClose: () => setExpandedImageSrc(null) })) : null;
+    // Shared trigger element props
+    const triggerProps = {
+        "data-citation-id": citationKey,
+        "data-citation-instance": citationInstanceId,
+        className: cn("relative inline-flex items-baseline cursor-pointer", "px-0.5 -mx-0.5 rounded-sm", "transition-all duration-150", "hover:bg-blue-500/10 dark:hover:bg-blue-400/10", hasImage && "hover:cursor-zoom-in", className),
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        onClick: handleClick,
+        onTouchEndCapture: isMobile ? handleTouchEnd : undefined,
+        "aria-label": displayText ? `[${displayText}]` : undefined,
+    };
+    // Render with Radix Popover
+    if (shouldShowPopover) {
+        const popoverContentElement = renderPopoverContent ? (renderPopoverContent({
             citation,
             verification: verification ?? null,
             status,
-        })) : (_jsx(DefaultPopoverContent, { citation: citation, verification: verification ?? null, status: status, onImageClick: handleImageClick })) })) : null;
-    // Status tooltip for miss/partial explanations
-    const statusTooltipContent = shouldShowStatusTooltip ? (_jsx(StatusTooltipContent, { citation: citation, status: status, verification: verification ?? null, isExpanded: isPhrasesExpanded, onToggleExpand: handleTogglePhrases })) : null;
-    const citationTrigger = (_jsx("span", { ref: (node) => {
-            containerRef.current =
-                node;
-            if (typeof ref === "function") {
-                ref(node);
-            }
-            else if (ref) {
-                ref.current = node;
-            }
-        }, "data-citation-id": citationKey, "data-citation-instance": citationInstanceId, "data-tooltip-expanded": isTooltipExpanded, "data-has-image": !!verification?.verificationImageBase64, className: classNames("dc-citation", `dc-citation--${variant}`, foundStatusClass, className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleToggleTooltip, onTouchEndCapture: isMobile ? handleTouchEnd : undefined, "aria-label": displayText ? `[${displayText}]` : undefined, "aria-expanded": isTooltipExpanded, children: renderCitationContent() }));
-    // Image overlay for full-size view
-    const imageOverlay = expandedImageSrc ? (_jsx(ImageOverlay, { src: expandedImageSrc, alt: "Citation verification - full size", onClose: handleCloseOverlay })) : null;
-    // Wrap with popover or status tooltip if needed
-    if (shouldShowPopover || shouldShowStatusTooltip) {
-        return (_jsxs(_Fragment, { children: [children, _jsxs("span", { className: "dc-popover-wrapper", ref: wrapperRef, "data-expanded": isTooltipExpanded, children: [citationTrigger, popoverContent, statusTooltipContent] }), imageOverlay] }));
+        })) : (_jsx(DefaultPopoverContent, { citation: citation, verification: verification ?? null, status: status, onImageClick: () => {
+                if (verification?.verificationImageBase64) {
+                    setExpandedImageSrc(verification.verificationImageBase64);
+                }
+            } }));
+        return (_jsxs(_Fragment, { children: [children, _jsxs(Popover, { open: isHovering, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("span", { ref: ref, ...triggerProps, children: renderCitationContent() }) }), _jsx(PopoverContent, { side: popoverPosition === "bottom" ? "bottom" : "top", onPointerDownOutside: (e) => e.preventDefault(), onInteractOutside: (e) => e.preventDefault(), children: popoverContentElement })] }), imageOverlay] }));
     }
-    return (_jsxs(_Fragment, { children: [children, citationTrigger, imageOverlay] }));
+    // Render without popover
+    return (_jsxs(_Fragment, { children: [children, _jsx("span", { ref: ref, ...triggerProps, children: renderCitationContent() }), imageOverlay] }));
 });
 CitationComponent.displayName = "CitationComponent";
 export const MemoizedCitationComponent = memo(CitationComponent);