@deepcitation/deepcitation-js 1.1.27 → 1.1.28

package/lib/react/CitationComponent.js

@@ -1,419 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef, memo, useCallback, useEffect, useMemo, useState, } from "react";
-import { createPortal } from "react-dom";
-import { CheckIcon, SpinnerIcon, WarningIcon } from "./icons.js";
-import { Popover, PopoverContent, PopoverTrigger } from "./Popover.js";
-import { cn, generateCitationInstanceId, generateCitationKey, } from "./utils.js";
-import { useSmartDiff } from "./useSmartDiff.js";
-/**
- * Get the default content type based on variant.
- */
-function getDefaultContent(variant) {
-    switch (variant) {
-        case "chip":
-        case "text":
-            return "keySpan";
-        case "brackets":
-        case "superscript":
-        case "minimal":
-        default:
-            return "number";
-    }
-}
-/**
- * Get display text based on content type and citation data.
- * Returns "1" as fallback if no citation number is available.
- */
-function getDisplayText(citation, content, fallbackDisplay) {
-    if (content === "indicator") {
-        return "";
-    }
-    if (content === "keySpan") {
-        return (citation.keySpan?.toString() ||
-            citation.citationNumber?.toString() ||
-            fallbackDisplay ||
-            "1");
-    }
-    // content === "number"
-    return citation.citationNumber?.toString() || "1";
-}
-function getStatusLabel(status) {
-    if (status.isVerified && !status.isPartialMatch)
-        return "Verified";
-    if (status.isPartialMatch)
-        return "Partial Match";
-    if (status.isMiss)
-        return "Not Found";
-    if (status.isPending)
-        return "Verifying...";
-    return "";
-}
-/**
- * Derive citation status from a Verification object.
- * The status comes from verification.status.
- */
-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,
-        };
-    }
-    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-screen image overlay for zoomed verification images.
- * Click anywhere or press Escape to close.
- */
-function ImageOverlay({ src, alt, onClose }) {
-    useEffect(() => {
-        const handleKeyDown = (e) => {
-            if (e.key === "Escape")
-                onClose();
-        };
-        document.addEventListener("keydown", handleKeyDown);
-        return () => document.removeEventListener("keydown", handleKeyDown);
-    }, [onClose]);
-    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.
-// =============================================================================
-/** 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(SpinnerIcon, {}) }));
-/** 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
-// =============================================================================
-/**
- * Renders diff highlighting between expected citation text and actual found text.
- * Uses the `diff` library via useSmartDiff hook for word-level highlighting.
- */
-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 expectedLineIds = citation.lineIds;
-    const actualLineIds = verification?.verifiedLineIds;
-    const lineIdDiffers = expectedLineIds &&
-        actualLineIds &&
-        JSON.stringify(expectedLineIds) !== JSON.stringify(actualLineIds);
-    const expectedPage = citation.pageNumber;
-    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" })] })] }));
-    }
-    // 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: [_jsxs("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: [_jsxs("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.
- *
- * ## 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
- *
- * ## Customization
- *
- * 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, fallbackDisplay, verification, variant = "brackets", content: contentProp, eventHandlers, behaviorConfig, isMobile = false, renderIndicator, renderContent, popoverPosition = "top", renderPopoverContent, }, ref) => {
-    // Resolve content: explicit content prop or default for variant
-    const resolvedContent = useMemo(() => {
-        if (contentProp)
-            return contentProp;
-        return getDefaultContent(variant);
-    }, [contentProp, variant]);
-    const [isHovering, setIsHovering] = useState(false);
-    const [expandedImageSrc, setExpandedImageSrc] = useState(null);
-    const citationKey = useMemo(() => generateCitationKey(citation), [citation]);
-    const citationInstanceId = useMemo(() => generateCitationInstanceId(citationKey), [citationKey]);
-    // Derive status from verification object
-    const status = useMemo(() => getStatusFromVerification(verification), [verification]);
-    const { isMiss, isPartialMatch, isVerified, isPending } = status;
-    const displayText = useMemo(() => {
-        return getDisplayText(citation, resolvedContent, fallbackDisplay);
-    }, [citation, resolvedContent, fallbackDisplay]);
-    // Behavior context for custom handlers
-    const getBehaviorContext = useCallback(() => ({
-        citation,
-        citationKey,
-        verification: verification ?? null,
-        isTooltipExpanded: isHovering,
-        isImageExpanded: !!expandedImageSrc,
-        hasImage: !!verification?.verificationImageBase64,
-    }), [citation, citationKey, verification, isHovering, expandedImageSrc]);
-    // Apply behavior actions from custom handler
-    const applyBehaviorActions = useCallback((actions) => {
-        if (actions.setImageExpanded !== undefined) {
-            if (typeof actions.setImageExpanded === "string") {
-                setExpandedImageSrc(actions.setImageExpanded);
-            }
-            else if (actions.setImageExpanded === true &&
-                verification?.verificationImageBase64) {
-                setExpandedImageSrc(verification.verificationImageBase64);
-            }
-            else if (actions.setImageExpanded === false) {
-                setExpandedImageSrc(null);
-            }
-        }
-    }, [verification?.verificationImageBase64]);
-    // Click handler
-    const handleClick = useCallback((e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        const context = getBehaviorContext();
-        // Custom onClick via behaviorConfig replaces default
-        if (behaviorConfig?.onClick) {
-            const result = behaviorConfig.onClick(context, e);
-            if (result && typeof result === "object") {
-                applyBehaviorActions(result);
-            }
-            eventHandlers?.onClick?.(citation, citationKey, e);
-            return;
-        }
-        // Custom eventHandlers.onClick disables default
-        if (eventHandlers?.onClick) {
-            eventHandlers.onClick(citation, citationKey, e);
-            return;
-        }
-        // Default: click opens image if available
-        if (verification?.verificationImageBase64) {
-            setExpandedImageSrc(verification.verificationImageBase64);
-        }
-    }, [
-        behaviorConfig,
-        eventHandlers,
-        citation,
-        citationKey,
-        verification?.verificationImageBase64,
-        getBehaviorContext,
-        applyBehaviorActions,
-    ]);
-    // Hover handlers
-    const handleMouseEnter = useCallback(() => {
-        setIsHovering(true);
-        if (behaviorConfig?.onHover?.onEnter) {
-            behaviorConfig.onHover.onEnter(getBehaviorContext());
-        }
-        eventHandlers?.onMouseEnter?.(citation, citationKey);
-    }, [
-        eventHandlers,
-        behaviorConfig,
-        citation,
-        citationKey,
-        getBehaviorContext,
-    ]);
-    const handleMouseLeave = useCallback(() => {
-        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();
-            e.stopPropagation();
-            eventHandlers?.onTouchEnd?.(citation, citationKey, e);
-        }
-    }, [eventHandlers, citation, citationKey, isMobile]);
-    // Early return for miss with fallback display (only when showing keySpan)
-    if (fallbackDisplay !== null &&
-        fallbackDisplay !== undefined &&
-        resolvedContent === "keySpan" &&
-        isMiss) {
-        return (_jsx("span", { className: cn("text-gray-400 dark:text-gray-500", className), children: fallbackDisplay }));
-    }
-    // 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)
-            return renderIndicator(status);
-        if (isPending)
-            return _jsx(PendingIndicator, {});
-        if (isMiss)
-            return _jsx(MissIndicator, {});
-        if (isPartialMatch)
-            return _jsx(PartialIndicator, {});
-        if (isVerified)
-            return _jsx(VerifiedIndicator, {});
-        return null;
-    };
-    // Render citation content
-    const renderCitationContent = () => {
-        if (renderContent) {
-            return renderContent({
-                citation,
-                status,
-                citationKey,
-                displayText,
-                isMergedDisplay: resolvedContent === "keySpan",
-            });
-        }
-        // Content type: indicator only
-        if (resolvedContent === "indicator") {
-            return _jsx("span", { children: renderStatusIndicator() });
-        }
-        // Variant: chip (pill/badge style)
-        if (variant === "chip") {
-            const chipStatusClasses = cn(isVerified && !isPartialMatch && "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400", isPartialMatch && "bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400", isMiss && "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400 line-through", isPending && "bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400", !isVerified && !isMiss && !isPending && "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400");
-            return (_jsxs("span", { className: cn("inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-sm font-medium", chipStatusClasses), children: [_jsx("span", { className: "max-w-60 overflow-hidden text-ellipsis whitespace-nowrap", children: displayText }), renderStatusIndicator()] }));
-        }
-        // Variant: superscript (footnote style)
-        if (variant === "superscript") {
-            const supStatusClasses = cn(isVerified && !isPartialMatch && "text-green-600 dark:text-green-500", isPartialMatch && "text-amber-600 dark:text-amber-500", isMiss && "text-red-500 dark:text-red-400 line-through", isPending && "text-gray-400 dark:text-gray-500", !isVerified && !isMiss && !isPending && "text-blue-600 dark:text-blue-400");
-            return (_jsxs("sup", { className: cn("text-xs font-medium transition-colors hover:underline", supStatusClasses), children: ["[", displayText, renderStatusIndicator(), "]"] }));
-        }
-        // Variant: text (inherits parent styling)
-        if (variant === "text") {
-            return (_jsxs("span", { className: statusClasses, children: [displayText, renderStatusIndicator()] }));
-        }
-        // Variant: minimal (compact with truncation)
-        if (variant === "minimal") {
-            return (_jsxs("span", { className: cn("max-w-80 overflow-hidden text-ellipsis", statusClasses), children: [displayText, renderStatusIndicator()] }));
-        }
-        // Variant: brackets (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: ["[", _jsxs("span", { className: cn("max-w-80 overflow-hidden text-ellipsis", statusClasses), children: [displayText, renderStatusIndicator()] }), "]"] }));
-    };
-    // Popover visibility
-    const isPopoverHidden = popoverPosition === "hidden";
-    const shouldShowPopover = !isPopoverHidden &&
-        verification &&
-        (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: () => {
-                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] }));
-    }
-    // Render without popover
-    return (_jsxs(_Fragment, { children: [children, _jsx("span", { ref: ref, ...triggerProps, children: renderCitationContent() }), imageOverlay] }));
-});
-CitationComponent.displayName = "CitationComponent";
-export const MemoizedCitationComponent = memo(CitationComponent);

package/lib/react/CitationVariants.d.ts

@@ -1,132 +0,0 @@
-import React, { type ReactNode } from "react";
-import type { CitationStatus } from "../types/citation.js";
-import type { Verification } from "../types/verification.js";
-import type { BaseCitationProps, CitationVariant as CitationVariantType, CitationEventHandlers } from "./types.js";
-/**
- * Shared props for all citation variant components.
- */
-export interface CitationVariantProps extends BaseCitationProps {
-    /** Found citation highlight location data */
-    verification?: Verification | null;
-    /** Event handlers */
-    eventHandlers?: CitationEventHandlers;
-    /** Whether on mobile device */
-    isMobile?: boolean;
-    /** Whether tooltips should be prevented */
-    preventTooltips?: boolean;
-    /** Custom pending text content */
-    pendingContent?: ReactNode;
-    /** Custom render function for verified indicator */
-    renderVerifiedIndicator?: (status: CitationStatus) => ReactNode;
-    /** Custom render function for partial match indicator */
-    renderPartialIndicator?: (status: CitationStatus) => ReactNode;
-}
-export interface ChipCitationProps extends CitationVariantProps {
-    /** Chip size */
-    size?: "sm" | "md" | "lg";
-    /** Whether to show an icon before the text */
-    showIcon?: boolean;
-    /** Custom icon to display */
-    icon?: ReactNode;
-}
-/**
- * Chip/Badge style citation component.
- * Displays citation as a rounded pill/badge.
- *
- * @example
- * ```tsx
- * <ChipCitation citation={citation} verification={found} size="md" />
- * ```
- */
-export declare const ChipCitation: React.ForwardRefExoticComponent<ChipCitationProps & React.RefAttributes<HTMLSpanElement>>;
-export interface SuperscriptCitationProps extends CitationVariantProps {
-    /** Whether to hide brackets around the superscript */
-    hideBrackets?: boolean;
-}
-/**
- * Superscript style citation component.
- * Displays citation as a superscript number like academic papers.
- *
- * @example
- * ```tsx
- * <SuperscriptCitation citation={citation} verification={found} />
- * // Renders: Text content¹
- * ```
- */
-export declare const SuperscriptCitation: React.ForwardRefExoticComponent<SuperscriptCitationProps & React.RefAttributes<HTMLSpanElement>>;
-export interface FootnoteCitationProps extends CitationVariantProps {
-    /** Footnote symbol style */
-    symbolStyle?: "number" | "asterisk" | "dagger" | "custom";
-    /** Custom symbol (when symbolStyle is "custom") */
-    customSymbol?: string;
-}
-/**
- * Footnote style citation component.
- * Displays citation as a footnote marker.
- *
- * @example
- * ```tsx
- * <FootnoteCitation citation={citation} symbolStyle="asterisk" />
- * // Renders: Text content*
- * ```
- */
-export declare const FootnoteCitation: React.ForwardRefExoticComponent<FootnoteCitationProps & React.RefAttributes<HTMLSpanElement>>;
-export interface InlineCitationProps extends CitationVariantProps {
-    /** Underline style */
-    underlineStyle?: "solid" | "dotted" | "dashed" | "none";
-}
-/**
- * Inline style citation component.
- * Displays citation inline with subtle underline decoration.
- *
- * @example
- * ```tsx
- * <InlineCitation citation={citation} underlineStyle="dotted" />
- * // Renders: "quoted text" with subtle underline
- * ```
- */
-export declare const InlineCitation: React.ForwardRefExoticComponent<InlineCitationProps & React.RefAttributes<HTMLSpanElement>>;
-export interface MinimalCitationProps extends CitationVariantProps {
-    /** Whether to show status indicator */
-    showStatusIndicator?: boolean;
-}
-/**
- * Minimal style citation component.
- * Displays just the citation number with minimal decoration.
- *
- * @example
- * ```tsx
- * <MinimalCitation citation={citation} />
- * // Renders: 1
- * ```
- */
-export declare const MinimalCitation: React.ForwardRefExoticComponent<MinimalCitationProps & React.RefAttributes<HTMLSpanElement>>;
-export interface VariantCitationProps extends CitationVariantProps {
-    /** The variant to render */
-    variant?: CitationVariantType;
-    /** Chip-specific props */
-    chipProps?: Partial<ChipCitationProps>;
-    /** Superscript-specific props */
-    superscriptProps?: Partial<SuperscriptCitationProps>;
-    /** Footnote-specific props */
-    footnoteProps?: Partial<FootnoteCitationProps>;
-    /** Inline-specific props */
-    inlineProps?: Partial<InlineCitationProps>;
-    /** Minimal-specific props */
-    minimalProps?: Partial<MinimalCitationProps>;
-}
-/**
- * Factory component that renders the appropriate citation variant.
- *
- * @example
- * ```tsx
- * <CitationVariantFactory variant="chip" citation={citation} chipProps={{ size: "lg" }} />
- * ```
- */
-export declare const CitationVariantFactory: React.ForwardRefExoticComponent<VariantCitationProps & React.RefAttributes<HTMLSpanElement>>;
-export declare const MemoizedChipCitation: React.NamedExoticComponent<ChipCitationProps & React.RefAttributes<HTMLSpanElement>>;
-export declare const MemoizedSuperscriptCitation: React.NamedExoticComponent<SuperscriptCitationProps & React.RefAttributes<HTMLSpanElement>>;
-export declare const MemoizedFootnoteCitation: React.NamedExoticComponent<FootnoteCitationProps & React.RefAttributes<HTMLSpanElement>>;
-export declare const MemoizedInlineCitation: React.NamedExoticComponent<InlineCitationProps & React.RefAttributes<HTMLSpanElement>>;
-export declare const MemoizedMinimalCitation: React.NamedExoticComponent<MinimalCitationProps & React.RefAttributes<HTMLSpanElement>>;
-export declare const MemoizedCitationVariantFactory: React.NamedExoticComponent<VariantCitationProps & React.RefAttributes<HTMLSpanElement>>;