@deepcitation/deepcitation-js 1.1.12 → 1.1.13

package/lib/react/CitationComponent.d.ts

@@ -7,33 +7,43 @@ export type { CitationVariant } from "./types.js";
 /**
  * Props for the CitationComponent.
  *
- * @example Brackets variant (default) - shows keySpan/number in brackets with blue styling
+ * @example Brackets variant (default) - shows keySpan in brackets with blue styling
  * ```tsx
  * <CitationComponent
- *   citation={{ citationNumber: 1, fullPhrase: "Revenue grew by 25%" }}
+ *   citation={{ citationNumber: 1, keySpan: "Revenue grew by 25%" }}
  *   verification={verificationResult}
  * />
- * // Renders: [1✓] with blue text
+ * // Renders: [Revenue grew by 25%✓] with blue text
  * ```
  *
- * @example Numeric variant - shows just the citation number with indicator
+ * @example Numeric only - use displayKeySpan=false with brackets variant
  * ```tsx
  * <CitationComponent
  *   citation={{ citationNumber: 1, keySpan: "25% growth" }}
  *   verification={verificationResult}
- *   variant="numeric"
+ *   displayKeySpan={false}
  * />
- * // Renders: 1✓
+ * // Renders: [1✓]
  * ```
  *
- * @example Text variant - shows the keySpan without styling
+ * @example Without brackets - use displayBrackets=false
+ * ```tsx
+ * <CitationComponent
+ *   citation={{ citationNumber: 1, keySpan: "25% growth" }}
+ *   verification={verificationResult}
+ *   displayBrackets={false}
+ * />
+ * // Renders: 25% growth✓ (no brackets)
+ * ```
+ *
+ * @example Text variant - inherits parent text styling, no truncation
  * ```tsx
  * <CitationComponent
  *   citation={{ citationNumber: 1, keySpan: "25% growth" }}
  *   verification={verificationResult}
  *   variant="text"
  * />
- * // Renders: 25% growth✓
+ * // Renders: 25% growth✓ (inherits parent styling)
  * ```
  *
  * @example Minimal variant - no brackets, just text and indicator
@@ -74,12 +84,17 @@ export interface CitationComponentProps extends BaseCitationProps {
     /**
      * Display variant for the citation.
      * - `brackets`: Shows keySpan/number in brackets, blue text styling (default)
-     * - `numeric`: Shows citation number with indicator, no brackets
-     * - `text`: Shows the keySpan, no text styling, no truncate, shows indicator
+     * - `text`: Shows the keySpan, inherits parent text styling, no truncation, shows indicator
      * - `minimal`: No brackets, just display text with indicator
      * - `indicator`: Only the status indicator (checkmark/warning), no text
      */
     variant?: CitationVariant;
+    /**
+     * Whether to show square brackets around the citation.
+     * Only applies to the `brackets` variant.
+     * @default true
+     */
+    displayBrackets?: boolean;
     /**
      * Event handlers for citation interactions.
      */

package/lib/react/CitationComponent.js

@@ -136,12 +136,28 @@ const ImageOverlay = ({ src, alt, 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);
 };
+/**
+ * Diff details for partial/miss verification states.
+ * Shows expected vs found text.
+ */
+const DiffDetails = ({ citation, verification, status, }) => {
+    const { isMiss, isPartialMatch } = status;
+    if (!isMiss && !isPartialMatch)
+        return null;
+    const expectedText = citation.fullPhrase || citation.keySpan?.toString() || "";
+    const actualText = verification?.matchSnippet || "";
+    const truncatedExpected = expectedText.length > 100 ? expectedText.slice(0, 100) + "…" : expectedText;
+    const truncatedActual = actualText.length > 100 ? actualText.slice(0, 100) + "…" : actualText;
+    return (_jsxs("span", { className: "dc-diff-details", children: [truncatedExpected && (_jsxs("span", { className: "dc-status-searched", children: [_jsx("span", { className: "dc-status-label", children: "Expected" }), _jsx("span", { className: "dc-status-text", 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" })] }))] }));
+};
 /**
  * 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 = ({ verification, status, onImageClick, }) => {
+const DefaultPopoverContent = ({ citation, verification, status, onImageClick, }) => {
     const hasImage = verification?.verificationImageBase64;
+    const { isMiss, isPartialMatch } = status;
     const handleImageClick = useCallback((e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -149,9 +165,9 @@ const DefaultPopoverContent = ({ verification, status, onImageClick, }) => {
             onImageClick(verification.verificationImageBase64);
         }
     }, [hasImage, verification?.verificationImageBase64, onImageClick]);
-    // If we have a verification image, show only the image
+    // If we have a verification image, show image + diff details for partial/miss
     if (hasImage) {
-        return (_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" }) }));
+        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);
@@ -161,7 +177,7 @@ const DefaultPopoverContent = ({ verification, status, onImageClick, }) => {
     if (!hasSnippet && !statusLabel) {
         return null;
     }
-    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] }))] }));
+    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 }))] }));
 };
 // =============================================================================
 // MAIN COMPONENT
@@ -182,7 +198,7 @@ const DefaultPopoverContent = ({ verification, status, onImageClick, }) => {
  * This means partial matches have blue text (because they were found) but
  * an orange indicator (because they didn't match exactly).
  */
-export const CitationComponent = forwardRef(({ citation, children, className, displayKeySpan = false, fallbackDisplay, verification, variant = "brackets", eventHandlers, isMobile = false, renderIndicator, renderContent, popoverPosition = "top", renderPopoverContent, }, ref) => {
+export const CitationComponent = forwardRef(({ citation, children, className, displayKeySpan = true, displayBrackets = true, fallbackDisplay, verification, variant = "brackets", eventHandlers, isMobile = false, renderIndicator, renderContent, popoverPosition = "top", renderPopoverContent, }, ref) => {
     const containerRef = useRef(null);
     const wrapperRef = useRef(null);
     const [expandedImageSrc, setExpandedImageSrc] = useState(null);
@@ -268,12 +284,8 @@ export const CitationComponent = forwardRef(({ citation, children, className, di
     // const { isVerified, isPending } = status;
     const { isMiss, isPartialMatch, isVerified, isPending } = status;
     const displayText = useMemo(() => {
-        // For numeric variant, always show the citation number
-        if (variant === "numeric") {
-            return citation.citationNumber?.toString() ?? "";
-        }
         // For text/minimal variants, always show keySpan
-        // For brackets variant, show keySpan only if displayKeySpan prop is true
+        // For brackets variant, show keySpan based on displayKeySpan prop
         return getCitationDisplayText(citation, {
             displayKeySpan: variant === "text" ||
                 variant === "minimal" ||
@@ -348,12 +360,8 @@ export const CitationComponent = forwardRef(({ citation, children, className, di
         if (variant === "minimal") {
             return (_jsxs("span", { className: "dc-citation-text", children: [displayText, renderStatusIndicator()] }));
         }
-        // Numeric variant - shows citation number with indicator, no brackets
-        if (variant === "numeric") {
-            return (_jsxs("span", { className: "dc-citation-text", 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: ["[", _jsxs("span", { className: "dc-citation-text", children: [displayText, renderStatusIndicator()] }), "]"] }));
+        return (_jsxs("span", { className: "dc-citation-bracket", "aria-hidden": "true", role: "presentation", children: [displayBrackets && "[", _jsxs("span", { className: "dc-citation-text", children: [displayText, renderStatusIndicator()] }), displayBrackets && "]"] }));
     };
     // Determine if popover should be shown
     const isPopoverHidden = popoverPosition === "hidden";

package/lib/react/styles.css

@@ -57,6 +57,27 @@
   text-overflow: ellipsis;
 }
 
+/* Text variant - plain styling that inherits from parent */
+.dc-citation-text--plain {
+  max-width: none;
+  overflow: visible;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  color: inherit;
+}
+
+/* Text variant container - inherit all styling from parent */
+.dc-citation--text {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.dc-citation--text .dc-citation-text--plain {
+  color: inherit;
+}
+
 /* Status-specific styles */
 .dc-citation--verified .dc-citation-text {
   color: var(--dc-color-verified, #2563eb);
@@ -423,6 +444,23 @@
   text-overflow: ellipsis;
 }
 
+.dc-status-text--miss {
+  color: var(--dc-color-warning, #d97706);
+  font-style: italic;
+}
+
+/* Diff details container in popover */
+.dc-diff-details {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  margin-top: 0.5rem;
+  padding-top: 0.5rem;
+  border-top: 1px solid var(--dc-border-color, #e2e8f0);
+  font-family: system-ui, -apple-system, sans-serif;
+  font-size: 0.75rem;
+}
+
 /* Dark mode support */
 @media (prefers-color-scheme: dark) {
   .dc-status-tooltip {

package/lib/react/types.d.ts

@@ -4,13 +4,14 @@ import type { SearchState } from "../types/search.js";
 /**
  * Available citation display variants.
  *
- * - `brackets`: Shows keySpan/number in brackets with blue text styling (default)
- * - `numeric`: Shows citation number with indicator, no brackets
- * - `text`: Shows the keySpan, no text styling, no truncate, shows indicator
+ * - `brackets`: Shows keySpan/number in brackets with blue text styling (default).
+ *               Use displayKeySpan=false for numeric-only display.
+ *               Use displayBrackets=false to hide the square brackets.
+ * - `text`: Shows the keySpan, inherits parent text styling, no truncation, shows indicator
  * - `minimal`: No brackets, just display text with indicator
  * - `indicator`: Only the status indicator (checkmark/warning), no text
  */
-export type CitationVariant = "brackets" | "numeric" | "text" | "minimal" | "indicator";
+export type CitationVariant = "brackets" | "text" | "minimal" | "indicator";
 /**
  * URL fetch status for URL citations.
  */
@@ -89,7 +90,10 @@ export interface BaseCitationProps {
     className?: string;
     /** Class name for controlling inner content width */
     innerWidthClassName?: string;
-    /** When true, displays keySpan/citationNumber merged in the bracket */
+    /**
+     * When true, displays keySpan text. When false, displays citation number only.
+     * @default true
+     */
     displayKeySpan?: boolean;
     /** Fallback display text when citation keySpan is empty */
     fallbackDisplay?: string | null;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@deepcitation/deepcitation-js",
-    "version": "1.1.12",
+    "version": "1.1.13",
     "description": "DeepCitation JavaScript SDK for deterministic AI citation verification",
     "type": "module",
     "private": false,