@deepcitation/deepcitation-js 1.1.25 → 1.1.27

package/lib/react/CitationComponent.d.ts

@@ -1,8 +1,8 @@
 import React from "react";
 import { type CitationStatus } from "../types/citation.js";
 import type { Verification } from "../types/verification.js";
-import type { BaseCitationProps, CitationBehaviorConfig, CitationEventHandlers, CitationRenderProps, CitationVariant } from "./types.js";
-export type { CitationVariant } from "./types.js";
+import type { BaseCitationProps, CitationBehaviorConfig, CitationContent, CitationEventHandlers, CitationRenderProps, CitationVariant } from "./types.js";
+export type { CitationVariant, CitationContent } from "./types.js";
 /**
  * Props for the CitationComponent.
  *
@@ -44,15 +44,28 @@ export interface CitationComponentProps extends BaseCitationProps {
     /** Verification result from the DeepCitation API */
     verification?: Verification | null;
     /**
-     * Display variant for the citation.
-     * - `brackets`: [keySpan✓] with styling (default)
-     * - `text`: keySpan✓ inherits parent styling
-     * - `minimal`: text with indicator, no brackets
-     * - `indicator`: only the status indicator
+     * Visual style variant for the citation.
+     * - `chip`: Pill/badge style with background color
+     * - `brackets`: [text✓] with square brackets (default)
+     * - `text`: Plain text, inherits parent styling
+     * - `superscript`: Small raised text like footnotes¹
+     * - `minimal`: Compact text with indicator, truncated
      */
     variant?: CitationVariant;
-    /** Hide square brackets (only for brackets variant) */
-    hideBrackets?: boolean;
+    /**
+     * What content to display in the citation.
+     * - `keySpan`: Descriptive text (e.g., "Revenue Growth")
+     * - `number`: Citation number (e.g., "1", "2", "3")
+     * - `indicator`: Only the status icon, no text
+     *
+     * Defaults based on variant:
+     * - `chip` → `keySpan`
+     * - `brackets` → `number`
+     * - `text` → `keySpan`
+     * - `superscript` → `number`
+     * - `minimal` → `number`
+     */
+    content?: CitationContent;
     /** Event handlers for citation interactions */
     eventHandlers?: CitationEventHandlers;
     /**

package/lib/react/CitationComponent.js

@@ -3,8 +3,40 @@ import { forwardRef, memo, useCallback, useEffect, useMemo, useState, } from "re
 import { createPortal } from "react-dom";
 import { CheckIcon, SpinnerIcon, WarningIcon } from "./icons.js";
 import { Popover, PopoverContent, PopoverTrigger } from "./Popover.js";
-import { cn, generateCitationInstanceId, generateCitationKey, getCitationDisplayText, } from "./utils.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";
@@ -171,7 +203,13 @@ function DiffDetails({ citation, verification, status, }) {
  * 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) => {
+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]);
@@ -180,11 +218,8 @@ export const CitationComponent = forwardRef(({ citation, children, className, hi
     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]);
+        return getDisplayText(citation, resolvedContent, fallbackDisplay);
+    }, [citation, resolvedContent, fallbackDisplay]);
     // Behavior context for custom handlers
     const getBehaviorContext = useCallback(() => ({
         citation,
@@ -276,10 +311,10 @@ export const CitationComponent = forwardRef(({ citation, children, className, hi
             eventHandlers?.onTouchEnd?.(citation, citationKey, e);
         }
     }, [eventHandlers, citation, citationKey, isMobile]);
-    // Early return for miss with fallback display
+    // Early return for miss with fallback display (only when showing keySpan)
     if (fallbackDisplay !== null &&
         fallbackDisplay !== undefined &&
-        !hideKeySpan &&
+        resolvedContent === "keySpan" &&
         isMiss) {
         return (_jsx("span", { className: cn("text-gray-400 dark:text-gray-500", className), children: fallbackDisplay }));
     }
@@ -316,20 +351,33 @@ export const CitationComponent = forwardRef(({ citation, children, className, hi
                 status,
                 citationKey,
                 displayText,
-                isMergedDisplay: variant === "text" || variant === "brackets" || !hideKeySpan,
+                isMergedDisplay: resolvedContent === "keySpan",
             });
         }
-        if (variant === "indicator") {
+        // 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()] }));
         }
-        // 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 && "]"] }));
+        // 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";

package/lib/react/CitationVariants.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { memo, useMemo, useCallback, forwardRef, } from "react";
 import { getCitationStatus } from "../parsing/parseCitation.js";
-import { generateCitationKey, generateCitationInstanceId, getCitationDisplayText, getCitationKeySpanText, classNames, } from "./utils.js";
+import { generateCitationKey, generateCitationInstanceId, getCitationDisplayText, getCitationNumber, classNames, } from "./utils.js";
 const TWO_DOTS_THINKING_CONTENT = "..";
 /**
  * Hook to get common citation data.
@@ -17,11 +17,11 @@ function useCitationData(citation, verification) {
 /**
  * Default verified indicator (checkmark)
  */
-const DefaultVerifiedIndicator = () => (_jsx("span", { className: "citation-verified-icon", "aria-hidden": "true", children: "\u2713" }));
+const DefaultVerifiedIndicator = () => (_jsx("span", { className: "text-green-600 dark:text-green-500 ml-0.5", "aria-hidden": "true", children: "\u2713" }));
 /**
  * Default partial match indicator (asterisk)
  */
-const DefaultPartialIndicator = () => (_jsx("span", { className: "citation-partial-icon", "aria-hidden": "true", children: "*" }));
+const DefaultPartialIndicator = () => (_jsx("span", { className: "text-amber-600 dark:text-amber-500 ml-0.5", "aria-hidden": "true", children: "*" }));
 /**
  * Chip/Badge style citation component.
  * Displays citation as a rounded pill/badge.
@@ -31,16 +31,11 @@ const DefaultPartialIndicator = () => (_jsx("span", { className: "citation-parti
  * <ChipCitation citation={citation} verification={found} size="md" />
  * ```
  */
-export const ChipCitation = forwardRef(({ citation, children, className, hideKeySpan = false, fallbackDisplay, verification, eventHandlers, isMobile = false, preventTooltips = false, pendingContent = TWO_DOTS_THINKING_CONTENT, renderVerifiedIndicator = () => _jsx(DefaultVerifiedIndicator, {}), renderPartialIndicator = () => _jsx(DefaultPartialIndicator, {}), size = "md", showIcon = false, icon, }, ref) => {
+export const ChipCitation = forwardRef(({ citation, children, className, fallbackDisplay, verification, eventHandlers, isMobile = false, preventTooltips = false, pendingContent = TWO_DOTS_THINKING_CONTENT, renderVerifiedIndicator = () => _jsx(DefaultVerifiedIndicator, {}), renderPartialIndicator = () => _jsx(DefaultPartialIndicator, {}), size = "md", showIcon = false, icon, }, ref) => {
     const { citationKey, citationInstanceId, status } = useCitationData(citation, verification);
     const { isVerified, isMiss, isPartialMatch, isPending } = status;
-    const displayText = useMemo(() => getCitationDisplayText(citation, {
-        hideKeySpan,
-        fallbackDisplay,
-    }), [citation, hideKeySpan, fallbackDisplay]);
-    const keySpanText = useMemo(() => getCitationKeySpanText(citation, {
-        hideKeySpan,
-    }), [citation, hideKeySpan]);
+    // ChipCitation shows keySpan by default
+    const displayText = useMemo(() => getCitationDisplayText(citation, { fallbackDisplay }), [citation, fallbackDisplay]);
     const handleClick = useCallback((e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -53,22 +48,22 @@ export const ChipCitation = forwardRef(({ citation, children, className, hideKey
         eventHandlers?.onMouseLeave?.(citation, citationKey);
     }, [eventHandlers, citation, citationKey]);
     const sizeClasses = {
-        sm: "citation-chip--sm",
-        md: "citation-chip--md",
-        lg: "citation-chip--lg",
+        sm: "text-xs px-1.5 py-px",
+        md: "text-sm px-2 py-0.5",
+        lg: "text-base px-3 py-1",
     };
     // Check partial first since isVerified is true when isPartialMatch is true
     const statusClass = isPartialMatch
-        ? "citation-chip--partial"
+        ? "bg-amber-100 text-amber-600 dark:bg-amber-900/30 dark:text-amber-500"
         : isMiss
-            ? "citation-chip--miss"
+            ? "bg-red-100 text-red-600 dark:bg-red-900/30 dark:text-red-400 line-through"
             : isVerified
-                ? "citation-chip--verified"
+                ? "bg-green-100 text-green-600 dark:bg-green-900/30 dark:text-green-500"
                 : isPending
-                    ? "citation-chip--pending"
-                    : "";
-    return (_jsxs(_Fragment, { children: [children, _jsxs("span", { ref: ref, "data-citation-id": citationKey, "data-citation-instance": citationInstanceId, "data-variant": "chip", className: classNames("citation-chip", sizeClasses[size], statusClass, className), onMouseEnter: preventTooltips ? undefined : handleMouseEnter, onMouseLeave: preventTooltips ? undefined : handleMouseLeave, onMouseDown: handleClick, onClick: (e) => e.stopPropagation(), "aria-label": displayText ? `Citation: ${displayText}` : undefined, children: [showIcon &&
-                        (icon || _jsx("span", { className: "citation-chip__icon", children: "\uD83D\uDCC4" })), _jsx("span", { className: "citation-chip__text", children: displayText }), isPartialMatch && renderPartialIndicator(status), isVerified && !isPartialMatch && renderVerifiedIndicator(status), isPending && (_jsx("span", { className: "citation-chip__pending", children: pendingContent }))] })] }));
+                    ? "bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-400"
+                    : "bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400";
+    return (_jsxs(_Fragment, { children: [children, _jsxs("span", { ref: ref, "data-citation-id": citationKey, "data-citation-instance": citationInstanceId, "data-variant": "chip", className: classNames("inline-flex items-center gap-1 rounded-full font-medium cursor-pointer transition-colors hover:brightness-95", sizeClasses[size], statusClass, className), onMouseEnter: preventTooltips ? undefined : handleMouseEnter, onMouseLeave: preventTooltips ? undefined : handleMouseLeave, onMouseDown: handleClick, onClick: (e) => e.stopPropagation(), "aria-label": displayText ? `Citation: ${displayText}` : undefined, children: [showIcon &&
+                        (icon || _jsx("span", { className: "text-[0.9em]", children: "\uD83D\uDCC4" })), _jsx("span", { className: "font-medium", children: displayText }), isPartialMatch && renderPartialIndicator(status), isVerified && !isPartialMatch && renderVerifiedIndicator(status), isPending && (_jsx("span", { className: "opacity-70", children: pendingContent }))] })] }));
 });
 ChipCitation.displayName = "ChipCitation";
 /**
@@ -81,13 +76,11 @@ ChipCitation.displayName = "ChipCitation";
  * // Renders: Text content¹
  * ```
  */
-export const SuperscriptCitation = forwardRef(({ citation, children, className, hideKeySpan = false, fallbackDisplay, verification, eventHandlers, isMobile = false, preventTooltips = false, pendingContent = TWO_DOTS_THINKING_CONTENT, renderVerifiedIndicator = () => _jsx(DefaultVerifiedIndicator, {}), renderPartialIndicator = () => _jsx(DefaultPartialIndicator, {}), hideBrackets = false, }, ref) => {
+export const SuperscriptCitation = forwardRef(({ citation, children, className, fallbackDisplay, verification, eventHandlers, isMobile = false, preventTooltips = false, pendingContent = TWO_DOTS_THINKING_CONTENT, renderVerifiedIndicator = () => _jsx(DefaultVerifiedIndicator, {}), renderPartialIndicator = () => _jsx(DefaultPartialIndicator, {}), hideBrackets = false, }, ref) => {
     const { citationKey, citationInstanceId, status } = useCitationData(citation, verification);
     const { isVerified, isMiss, isPartialMatch, isPending } = status;
-    const displayText = useMemo(() => getCitationDisplayText(citation, {
-        hideKeySpan,
-        fallbackDisplay,
-    }), [citation, hideKeySpan, fallbackDisplay]);
+    // SuperscriptCitation shows number by default
+    const displayText = useMemo(() => getCitationNumber(citation), [citation]);
     const handleClick = useCallback((e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -101,15 +94,15 @@ export const SuperscriptCitation = forwardRef(({ citation, children, className,
     }, [eventHandlers, citation, citationKey]);
     // Check partial first since isVerified is true when isPartialMatch is true
     const statusClass = isPartialMatch
-        ? "citation-superscript--partial"
+        ? "text-amber-600 dark:text-amber-500"
         : isMiss
-            ? "citation-superscript--miss"
+            ? "text-red-500 dark:text-red-400 line-through"
             : isVerified
-                ? "citation-superscript--verified"
+                ? "text-green-600 dark:text-green-500"
                 : isPending
-                    ? "citation-superscript--pending"
-                    : "";
-    return (_jsxs(_Fragment, { children: [children, _jsxs("sup", { ref: ref, "data-citation-id": citationKey, "data-citation-instance": citationInstanceId, "data-variant": "superscript", className: classNames("citation-superscript", statusClass, className), onMouseEnter: preventTooltips ? undefined : handleMouseEnter, onMouseLeave: preventTooltips ? undefined : handleMouseLeave, onMouseDown: handleClick, onClick: (e) => e.stopPropagation(), "aria-label": `Citation ${displayText}`, children: [!hideBrackets && "[", displayText, isPartialMatch && renderPartialIndicator(status), isVerified && !isPartialMatch && renderVerifiedIndicator(status), isPending && pendingContent, !hideBrackets && "]"] })] }));
+                    ? "text-gray-400 dark:text-gray-500"
+                    : "text-blue-600 dark:text-blue-400";
+    return (_jsxs(_Fragment, { children: [children, _jsxs("sup", { ref: ref, "data-citation-id": citationKey, "data-citation-instance": citationInstanceId, "data-variant": "superscript", className: classNames("text-xs cursor-pointer font-medium transition-colors hover:underline", statusClass, className), onMouseEnter: preventTooltips ? undefined : handleMouseEnter, onMouseLeave: preventTooltips ? undefined : handleMouseLeave, onMouseDown: handleClick, onClick: (e) => e.stopPropagation(), "aria-label": `Citation ${displayText}`, children: [!hideBrackets && "[", displayText, isPartialMatch && renderPartialIndicator(status), isVerified && !isPartialMatch && renderVerifiedIndicator(status), isPending && pendingContent, !hideBrackets && "]"] })] }));
 });
 SuperscriptCitation.displayName = "SuperscriptCitation";
 const FOOTNOTE_SYMBOLS = ["*", "†", "‡", "§", "‖", "¶"];
@@ -152,15 +145,15 @@ export const FootnoteCitation = forwardRef(({ citation, children, className, fal
     }, [eventHandlers, citation, citationKey]);
     // Check partial first since isVerified is true when isPartialMatch is true
     const statusClass = isPartialMatch
-        ? "citation-footnote--partial"
+        ? "text-amber-600 dark:text-amber-500"
         : isMiss
-            ? "citation-footnote--miss"
+            ? "text-red-500 dark:text-red-400 line-through"
             : isVerified
-                ? "citation-footnote--verified"
+                ? "text-green-600 dark:text-green-500"
                 : isPending
-                    ? "citation-footnote--pending"
-                    : "";
-    return (_jsxs(_Fragment, { children: [children, _jsxs("sup", { ref: ref, "data-citation-id": citationKey, "data-citation-instance": citationInstanceId, "data-variant": "footnote", className: classNames("citation-footnote", statusClass, className), onMouseEnter: preventTooltips ? undefined : handleMouseEnter, onMouseLeave: preventTooltips ? undefined : handleMouseLeave, onMouseDown: handleClick, onClick: (e) => e.stopPropagation(), "aria-label": `Footnote ${displaySymbol}`, children: [displaySymbol, isPartialMatch && renderPartialIndicator(status), isVerified && !isPartialMatch && renderVerifiedIndicator(status), isPending && pendingContent] })] }));
+                    ? "text-gray-400 dark:text-gray-500"
+                    : "text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400";
+    return (_jsxs(_Fragment, { children: [children, _jsxs("sup", { ref: ref, "data-citation-id": citationKey, "data-citation-instance": citationInstanceId, "data-variant": "footnote", className: classNames("text-xs cursor-pointer font-normal transition-colors", statusClass, className), onMouseEnter: preventTooltips ? undefined : handleMouseEnter, onMouseLeave: preventTooltips ? undefined : handleMouseLeave, onMouseDown: handleClick, onClick: (e) => e.stopPropagation(), "aria-label": `Footnote ${displaySymbol}`, children: [displaySymbol, isPartialMatch && renderPartialIndicator(status), isVerified && !isPartialMatch && renderVerifiedIndicator(status), isPending && pendingContent] })] }));
 });
 FootnoteCitation.displayName = "FootnoteCitation";
 /**
@@ -173,14 +166,11 @@ FootnoteCitation.displayName = "FootnoteCitation";
  * // Renders: "quoted text" with subtle underline
  * ```
  */
-export const InlineCitation = forwardRef(({ citation, children, className, hideKeySpan = false, // Default to showing keySpan for inline
-fallbackDisplay, verification, eventHandlers, preventTooltips = false, pendingContent = TWO_DOTS_THINKING_CONTENT, renderVerifiedIndicator = () => _jsx(DefaultVerifiedIndicator, {}), renderPartialIndicator = () => _jsx(DefaultPartialIndicator, {}), underlineStyle = "dotted", }, ref) => {
+export const InlineCitation = forwardRef(({ citation, children, className, fallbackDisplay, verification, eventHandlers, preventTooltips = false, pendingContent = TWO_DOTS_THINKING_CONTENT, renderVerifiedIndicator = () => _jsx(DefaultVerifiedIndicator, {}), renderPartialIndicator = () => _jsx(DefaultPartialIndicator, {}), underlineStyle = "dotted", }, ref) => {
     const { citationKey, citationInstanceId, status } = useCitationData(citation, verification);
     const { isVerified, isMiss, isPartialMatch, isPending } = status;
-    const displayText = useMemo(() => getCitationDisplayText(citation, {
-        hideKeySpan,
-        fallbackDisplay,
-    }), [citation, hideKeySpan, fallbackDisplay]);
+    // InlineCitation shows keySpan by default
+    const displayText = useMemo(() => getCitationDisplayText(citation, { fallbackDisplay }), [citation, fallbackDisplay]);
     const handleClick = useCallback((e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -194,16 +184,21 @@ fallbackDisplay, verification, eventHandlers, preventTooltips = false, pendingCo
     }, [eventHandlers, citation, citationKey]);
     // Check partial first since isVerified is true when isPartialMatch is true
     const statusClass = isPartialMatch
-        ? "citation-inline--partial"
+        ? "text-amber-600 dark:text-amber-500"
         : isMiss
-            ? "citation-inline--miss"
+            ? "text-red-500 dark:text-red-400 line-through"
             : isVerified
-                ? "citation-inline--verified"
+                ? "text-green-600 dark:text-green-500"
                 : isPending
-                    ? "citation-inline--pending"
+                    ? "text-gray-400 dark:text-gray-500"
                     : "";
-    const underlineClass = `citation-inline--underline-${underlineStyle}`;
-    return (_jsxs(_Fragment, { children: [children, _jsxs("span", { ref: ref, "data-citation-id": citationKey, "data-citation-instance": citationInstanceId, "data-variant": "inline", className: classNames("citation-inline", underlineClass, statusClass, className), onMouseEnter: preventTooltips ? undefined : handleMouseEnter, onMouseLeave: preventTooltips ? undefined : handleMouseLeave, onMouseDown: handleClick, onClick: (e) => e.stopPropagation(), "aria-label": `Citation: ${displayText}`, children: [displayText, isPartialMatch && renderPartialIndicator(status), isVerified && !isPartialMatch && renderVerifiedIndicator(status), isPending && (_jsx("span", { className: "citation-inline__pending", children: pendingContent }))] })] }));
+    const underlineClasses = {
+        solid: "border-b border-current",
+        dotted: "border-b border-dotted border-current",
+        dashed: "border-b border-dashed border-current",
+        none: "",
+    };
+    return (_jsxs(_Fragment, { children: [children, _jsxs("span", { ref: ref, "data-citation-id": citationKey, "data-citation-instance": citationInstanceId, "data-variant": "inline", className: classNames("cursor-pointer transition-colors hover:bg-blue-500/5", underlineClasses[underlineStyle], statusClass, className), onMouseEnter: preventTooltips ? undefined : handleMouseEnter, onMouseLeave: preventTooltips ? undefined : handleMouseLeave, onMouseDown: handleClick, onClick: (e) => e.stopPropagation(), "aria-label": `Citation: ${displayText}`, children: [displayText, isPartialMatch && renderPartialIndicator(status), isVerified && !isPartialMatch && renderVerifiedIndicator(status), isPending && (_jsx("span", { className: "opacity-70 ml-1", children: pendingContent }))] })] }));
 });
 InlineCitation.displayName = "InlineCitation";
 /**
@@ -216,13 +211,11 @@ InlineCitation.displayName = "InlineCitation";
  * // Renders: 1
  * ```
  */
-export const MinimalCitation = forwardRef(({ citation, children, className, hideKeySpan = false, fallbackDisplay, verification, eventHandlers, preventTooltips = false, pendingContent = TWO_DOTS_THINKING_CONTENT, renderVerifiedIndicator = () => _jsx(DefaultVerifiedIndicator, {}), renderPartialIndicator = () => _jsx(DefaultPartialIndicator, {}), showStatusIndicator = true, }, ref) => {
+export const MinimalCitation = forwardRef(({ citation, children, className, fallbackDisplay, verification, eventHandlers, preventTooltips = false, pendingContent = TWO_DOTS_THINKING_CONTENT, renderVerifiedIndicator = () => _jsx(DefaultVerifiedIndicator, {}), renderPartialIndicator = () => _jsx(DefaultPartialIndicator, {}), showStatusIndicator = true, }, ref) => {
     const { citationKey, citationInstanceId, status } = useCitationData(citation, verification);
     const { isVerified, isMiss, isPartialMatch, isPending } = status;
-    const displayText = useMemo(() => getCitationDisplayText(citation, {
-        hideKeySpan,
-        fallbackDisplay,
-    }), [citation, hideKeySpan, fallbackDisplay]);
+    // MinimalCitation shows number by default
+    const displayText = useMemo(() => getCitationNumber(citation), [citation]);
     const handleClick = useCallback((e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -236,15 +229,15 @@ export const MinimalCitation = forwardRef(({ citation, children, className, hide
     }, [eventHandlers, citation, citationKey]);
     // Check partial first since isVerified is true when isPartialMatch is true
     const statusClass = isPartialMatch
-        ? "citation-minimal--partial"
+        ? "text-amber-600 dark:text-amber-500"
         : isMiss
-            ? "citation-minimal--miss"
+            ? "text-red-500 dark:text-red-400 line-through"
             : isVerified
-                ? "citation-minimal--verified"
+                ? "text-green-600 dark:text-green-500"
                 : isPending
-                    ? "citation-minimal--pending"
-                    : "";
-    return (_jsxs(_Fragment, { children: [children, _jsxs("span", { ref: ref, "data-citation-id": citationKey, "data-citation-instance": citationInstanceId, "data-variant": "minimal", className: classNames("citation-minimal", statusClass, className), onMouseEnter: preventTooltips ? undefined : handleMouseEnter, onMouseLeave: preventTooltips ? undefined : handleMouseLeave, onMouseDown: handleClick, onClick: (e) => e.stopPropagation(), "aria-label": `Citation ${displayText}`, children: [displayText, showStatusIndicator && (_jsxs(_Fragment, { children: [isPartialMatch && renderPartialIndicator(status), isVerified && !isPartialMatch && renderVerifiedIndicator(status), isPending && pendingContent] }))] })] }));
+                    ? "text-gray-400 dark:text-gray-500"
+                    : "text-blue-600 dark:text-blue-400";
+    return (_jsxs(_Fragment, { children: [children, _jsxs("span", { ref: ref, "data-citation-id": citationKey, "data-citation-instance": citationInstanceId, "data-variant": "minimal", className: classNames("cursor-pointer transition-colors hover:underline", statusClass, className), onMouseEnter: preventTooltips ? undefined : handleMouseEnter, onMouseLeave: preventTooltips ? undefined : handleMouseLeave, onMouseDown: handleClick, onClick: (e) => e.stopPropagation(), "aria-label": `Citation ${displayText}`, children: [displayText, showStatusIndicator && (_jsxs(_Fragment, { children: [isPartialMatch && renderPartialIndicator(status), isVerified && !isPartialMatch && renderVerifiedIndicator(status), isPending && pendingContent] }))] })] }));
 });
 MinimalCitation.displayName = "MinimalCitation";
 /**

package/lib/react/UrlCitationComponent.js

@@ -39,19 +39,19 @@ function getUrlPath(url) {
  * Status indicator icons for URL fetch states.
  */
 const STATUS_ICONS = {
-    verified: { icon: "✓", label: "Verified", className: "url-citation--verified" },
-    partial: { icon: "~", label: "Partial match", className: "url-citation--partial" },
-    pending: { icon: "…", label: "Verifying", className: "url-citation--pending" },
-    blocked_antibot: { icon: "🛡", label: "Blocked by anti-bot", className: "url-citation--blocked" },
-    blocked_login: { icon: "🔒", label: "Login required", className: "url-citation--blocked" },
-    blocked_paywall: { icon: "💳", label: "Paywall", className: "url-citation--blocked" },
-    blocked_geo: { icon: "🌍", label: "Geo-restricted", className: "url-citation--blocked" },
-    blocked_rate_limit: { icon: "⏱", label: "Rate limited", className: "url-citation--blocked" },
-    error_timeout: { icon: "⏰", label: "Timed out", className: "url-citation--error" },
-    error_not_found: { icon: "404", label: "Not found", className: "url-citation--error" },
-    error_server: { icon: "⚠", label: "Server error", className: "url-citation--error" },
-    error_network: { icon: "⚡", label: "Network error", className: "url-citation--error" },
-    unknown: { icon: "?", label: "Unknown status", className: "url-citation--unknown" },
+    verified: { icon: "✓", label: "Verified", className: "text-green-600 dark:text-green-500" },
+    partial: { icon: "~", label: "Partial match", className: "text-amber-600 dark:text-amber-500" },
+    pending: { icon: "…", label: "Verifying", className: "text-gray-400 dark:text-gray-500" },
+    blocked_antibot: { icon: "🛡", label: "Blocked by anti-bot", className: "text-amber-600 dark:text-amber-500" },
+    blocked_login: { icon: "🔒", label: "Login required", className: "text-amber-600 dark:text-amber-500" },
+    blocked_paywall: { icon: "💳", label: "Paywall", className: "text-amber-600 dark:text-amber-500" },
+    blocked_geo: { icon: "🌍", label: "Geo-restricted", className: "text-amber-600 dark:text-amber-500" },
+    blocked_rate_limit: { icon: "⏱", label: "Rate limited", className: "text-amber-600 dark:text-amber-500" },
+    error_timeout: { icon: "⏰", label: "Timed out", className: "text-red-500 dark:text-red-400" },
+    error_not_found: { icon: "404", label: "Not found", className: "text-red-500 dark:text-red-400" },
+    error_server: { icon: "⚠", label: "Server error", className: "text-red-500 dark:text-red-400" },
+    error_network: { icon: "⚡", label: "Network error", className: "text-red-500 dark:text-red-400" },
+    unknown: { icon: "?", label: "Unknown status", className: "text-gray-400 dark:text-gray-500" },
 };
 /**
  * Checks if status is a blocked status.
@@ -76,7 +76,7 @@ export function isVerifiedStatus(status) {
  */
 const DefaultBlockedIndicator = ({ status, errorMessage }) => {
     const statusInfo = STATUS_ICONS[status];
-    return (_jsx("span", { className: classNames("url-citation__blocked-indicator", statusInfo.className), title: errorMessage || statusInfo.label, "aria-label": statusInfo.label, children: _jsx("span", { className: "url-citation__blocked-icon", "aria-hidden": "true", children: statusInfo.icon }) }));
+    return (_jsx("span", { className: classNames("inline-flex items-center gap-1", statusInfo.className), title: errorMessage || statusInfo.label, "aria-label": statusInfo.label, children: _jsx("span", { className: "text-[0.9em]", "aria-hidden": "true", children: statusInfo.icon }) }));
 };
 /**
  * Default favicon component.
@@ -84,7 +84,7 @@ const DefaultBlockedIndicator = ({ status, errorMessage }) => {
 const DefaultFavicon = ({ url, faviconUrl }) => {
     const domain = extractDomain(url);
     const src = faviconUrl || `https://www.google.com/s2/favicons?domain=${domain}&sz=16`;
-    return (_jsx("img", { src: src, alt: "", className: "url-citation__favicon", width: 14, height: 14, loading: "lazy", onError: e => {
+    return (_jsx("img", { src: src, alt: "", className: "w-3.5 h-3.5 rounded-sm", width: 14, height: 14, loading: "lazy", onError: e => {
             // Hide broken favicon images
             e.target.style.display = "none";
         } }));
@@ -167,29 +167,29 @@ showFullUrlOnHover = true, showFavicon = true, showTitle = false, maxDisplayLeng
             return _jsx(DefaultBlockedIndicator, { status: fetchStatus, errorMessage: errorMessage });
         }
         if (isVerified) {
-            return (_jsx("span", { className: "url-citation__verified-icon", "aria-hidden": "true", title: "Verified", children: "\u2713" }));
+            return (_jsx("span", { className: "text-[0.85em] text-green-600 dark:text-green-500", "aria-hidden": "true", title: "Verified", children: "\u2713" }));
         }
         if (isPartial) {
-            return (_jsx("span", { className: "url-citation__partial-icon", "aria-hidden": "true", title: "Partial match", children: "~" }));
+            return (_jsx("span", { className: "text-[0.85em] text-amber-600 dark:text-amber-500", "aria-hidden": "true", title: "Partial match", children: "~" }));
         }
         if (isPending) {
-            return (_jsx("span", { className: "url-citation__pending", "aria-hidden": "true", children: "\u2026" }));
+            return (_jsx("span", { className: "opacity-70", "aria-hidden": "true", children: "\u2026" }));
         }
         return null;
     };
     // Choose variant-specific rendering
     if (variant === "chip") {
-        return (_jsxs(_Fragment, { children: [children, _jsxs("span", { ref: ref, "data-citation-id": citationKey, "data-citation-instance": citationInstanceId, "data-url": url, "data-fetch-status": fetchStatus, className: classNames("url-citation", "url-citation--chip", statusInfo.className, className), title: showFullUrlOnHover ? url : undefined, onMouseEnter: preventTooltips ? undefined : handleMouseEnter, onMouseLeave: preventTooltips ? undefined : handleMouseLeave, onMouseDown: handleClick, onClick: e => e.stopPropagation(), role: "link", "aria-label": `Link to ${domain}: ${statusInfo.label}`, children: [showFavicon && _jsx(DefaultFavicon, { url: url, faviconUrl: faviconUrl }), _jsx("span", { className: "url-citation__domain", children: displayText }), renderStatusIndicator()] })] }));
+        return (_jsxs(_Fragment, { children: [children, _jsxs("span", { ref: ref, "data-citation-id": citationKey, "data-citation-instance": citationInstanceId, "data-url": url, "data-fetch-status": fetchStatus, "data-variant": "chip", className: classNames("inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-sm cursor-pointer transition-colors no-underline", "bg-blue-100 dark:bg-blue-900/30", statusInfo.className, className), title: showFullUrlOnHover ? url : undefined, onMouseEnter: preventTooltips ? undefined : handleMouseEnter, onMouseLeave: preventTooltips ? undefined : handleMouseLeave, onMouseDown: handleClick, onClick: e => e.stopPropagation(), role: "link", "aria-label": `Link to ${domain}: ${statusInfo.label}`, children: [showFavicon && _jsx(DefaultFavicon, { url: url, faviconUrl: faviconUrl }), _jsx("span", { className: "max-w-[200px] overflow-hidden text-ellipsis whitespace-nowrap", children: displayText }), renderStatusIndicator()] })] }));
     }
     // Inline variant
     if (variant === "inline") {
-        return (_jsxs(_Fragment, { children: [children, _jsxs("a", { ref: ref, href: url, "data-citation-id": citationKey, "data-citation-instance": citationInstanceId, "data-fetch-status": fetchStatus, className: classNames("url-citation", "url-citation--inline", statusInfo.className, className), title: showFullUrlOnHover ? url : undefined, onMouseEnter: preventTooltips ? undefined : handleMouseEnter, onMouseLeave: preventTooltips ? undefined : handleMouseLeave, onClick: e => {
+        return (_jsxs(_Fragment, { children: [children, _jsxs("a", { ref: ref, href: url, "data-citation-id": citationKey, "data-citation-instance": citationInstanceId, "data-fetch-status": fetchStatus, "data-variant": "inline", className: classNames("inline-flex items-center gap-1 cursor-pointer transition-colors no-underline border-b border-dotted border-current", statusInfo.className, className), title: showFullUrlOnHover ? url : undefined, onMouseEnter: preventTooltips ? undefined : handleMouseEnter, onMouseLeave: preventTooltips ? undefined : handleMouseLeave, onClick: e => {
                         e.preventDefault();
                         handleClick(e);
-                    }, target: "_blank", rel: "noopener noreferrer", "aria-label": `Link to ${domain}: ${statusInfo.label}`, children: [showFavicon && _jsx(DefaultFavicon, { url: url, faviconUrl: faviconUrl }), _jsx("span", { className: "url-citation__text", children: displayText }), renderStatusIndicator()] })] }));
+                    }, target: "_blank", rel: "noopener noreferrer", "aria-label": `Link to ${domain}: ${statusInfo.label}`, children: [showFavicon && _jsx(DefaultFavicon, { url: url, faviconUrl: faviconUrl }), _jsx("span", { children: displayText }), renderStatusIndicator()] })] }));
     }
     // Bracket variant (default for non-URL citations)
-    return (_jsxs(_Fragment, { children: [children, _jsxs("span", { ref: ref, "data-citation-id": citationKey, "data-citation-instance": citationInstanceId, "data-url": url, "data-fetch-status": fetchStatus, className: classNames("url-citation", "url-citation--bracket", statusInfo.className, className), title: showFullUrlOnHover ? url : undefined, onMouseEnter: preventTooltips ? undefined : handleMouseEnter, onMouseLeave: preventTooltips ? undefined : handleMouseLeave, onMouseDown: handleClick, onClick: e => e.stopPropagation(), role: "link", "aria-label": `Link to ${domain}: ${statusInfo.label}`, children: ["[", showFavicon && _jsx(DefaultFavicon, { url: url, faviconUrl: faviconUrl }), _jsx("span", { className: "url-citation__domain", children: displayText }), renderStatusIndicator(), "]"] })] }));
+    return (_jsxs(_Fragment, { children: [children, _jsxs("span", { ref: ref, "data-citation-id": citationKey, "data-citation-instance": citationInstanceId, "data-url": url, "data-fetch-status": fetchStatus, "data-variant": "bracket", className: classNames("cursor-pointer transition-colors", statusInfo.className, className), title: showFullUrlOnHover ? url : undefined, onMouseEnter: preventTooltips ? undefined : handleMouseEnter, onMouseLeave: preventTooltips ? undefined : handleMouseLeave, onMouseDown: handleClick, onClick: e => e.stopPropagation(), role: "link", "aria-label": `Link to ${domain}: ${statusInfo.label}`, children: ["[", showFavicon && _jsx(DefaultFavicon, { url: url, faviconUrl: faviconUrl }), _jsx("span", { className: "max-w-[200px] overflow-hidden text-ellipsis whitespace-nowrap", children: displayText }), renderStatusIndicator(), "]"] })] }));
 });
 UrlCitationComponent.displayName = "UrlCitationComponent";
 /**

package/lib/react/icons.d.ts

@@ -1,11 +1,21 @@
+/**
+ * DeepCitation icon SVG (no dependencies)
+ */
+export declare const DeepCitationIcon: ({ className }: {
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;
 /**
  * Check icon SVG (no dependencies)
  */
-export declare const CheckIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const CheckIcon: ({ className }: {
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;
 /**
  * Warning icon SVG (no dependencies)
  */
-export declare const WarningIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const WarningIcon: ({ className }: {
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;
 /** Spinner component for loading/pending state */
 export declare const SpinnerIcon: ({ className }: {
     className?: string;

package/lib/react/icons.js

@@ -1,12 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "./utils.js";
+/**
+ * DeepCitation icon SVG (no dependencies)
+ */
+export const DeepCitationIcon = ({ className }) => (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "square", shapeRendering: "crispEdges", className: className, children: [_jsx("path", { d: "M7 3 L3 3 L3 21 L7 21" }), _jsx("path", { d: "M17 3 L21 3 L21 21 L17 21" })] }));
 /**
  * Check icon SVG (no dependencies)
  */
-export const CheckIcon = () => (_jsx("svg", { className: "dc-check-icon", viewBox: "0 0 256 256", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { d: "M229.66,66.34 L96,200 L34.34,138.34 L51,121.66 L96,166.69 L213,50 Z", stroke: "currentColor", strokeWidth: "12" }) }));
+export const CheckIcon = ({ className }) => (_jsx("svg", { className: cn("w-[0.7em] h-[0.7em]", className), viewBox: "0 0 256 256", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { d: "M229.66,66.34 L96,200 L34.34,138.34 L51,121.66 L96,166.69 L213,50 Z", stroke: "currentColor", strokeWidth: "12" }) }));
 /**
  * Warning icon SVG (no dependencies)
  */
-export const WarningIcon = () => (_jsx("svg", { className: "dc-status-icon", viewBox: "0 0 256 256", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { d: "M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM120,104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm8,88a12,12,0,1,1,12-12A12,12,0,0,1,128,192Z" }) }));
+export const WarningIcon = ({ className }) => (_jsx("svg", { className: cn("w-[0.7em] h-[0.7em]", className), viewBox: "0 0 256 256", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { d: "M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM120,104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm8,88a12,12,0,1,1,12-12A12,12,0,0,1,128,192Z" }) }));
 /** Spinner component for loading/pending state */
-export const SpinnerIcon = ({ 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" })] }));
+export const SpinnerIcon = ({ className }) => (_jsxs("svg", { className: cn("w-[0.7em] h-[0.7em] animate-spin", className), xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", 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" })] }));

package/lib/react/index.d.ts

@@ -10,7 +10,8 @@
  *
  * @packageDocumentation
  */
-export type { CitationContentProps, CitationRenderProps, CitationTooltipProps, CitationStyles, CitationStateClasses, CitationCursorClasses, CitationEventHandlers, CitationVariant as CitationVariantType, UrlFetchStatus, UrlCitationMeta, UrlCitationProps, CitationBehaviorConfig, CitationBehaviorContext, CitationBehaviorActions, CitationClickBehavior, CitationHoverBehavior, } from "./types.js";
+export type { CitationContentProps, CitationRenderProps, CitationTooltipProps, CitationStyles, CitationStateClasses, CitationCursorClasses, CitationEventHandlers, CitationVariant as CitationVariantType, CitationContent, UrlFetchStatus, UrlCitationMeta, UrlCitationProps, UrlCitationVariant, CitationBehaviorConfig, CitationBehaviorContext, CitationBehaviorActions, CitationClickBehavior, CitationHoverBehavior, } from "./types.js";
 export { extractDomain, isBlockedStatus, isErrorStatus, isVerifiedStatus, } from "./UrlCitationComponent.js";
-export { generateCitationKey, generateCitationInstanceId, getCitationDisplayText, getCitationKeySpanText, classNames, CITATION_X_PADDING, CITATION_Y_PADDING, } from "./utils.js";
+export { generateCitationKey, generateCitationInstanceId, getCitationDisplayText, getCitationNumber, getCitationKeySpanText, classNames, CITATION_X_PADDING, CITATION_Y_PADDING, } from "./utils.js";
 export { CitationComponent, MemoizedCitationComponent, type CitationVariant, type CitationComponentProps, } from "./CitationComponent.js";
+export { DeepCitationIcon, CheckIcon, SpinnerIcon, WarningIcon, } from "./icons.js";

package/lib/react/index.js

@@ -13,6 +13,8 @@
 // URL Utilities - For handling URL citation metadata
 export { extractDomain, isBlockedStatus, isErrorStatus, isVerifiedStatus, } from "./UrlCitationComponent.js";
 // Utilities - For generating citation keys and display text
-export { generateCitationKey, generateCitationInstanceId, getCitationDisplayText, getCitationKeySpanText, classNames, CITATION_X_PADDING, CITATION_Y_PADDING, } from "./utils.js";
+export { generateCitationKey, generateCitationInstanceId, getCitationDisplayText, getCitationNumber, getCitationKeySpanText, classNames, CITATION_X_PADDING, CITATION_Y_PADDING, } from "./utils.js";
 // Components
 export { CitationComponent, MemoizedCitationComponent, } from "./CitationComponent.js";
+// Icons
+export { DeepCitationIcon, CheckIcon, SpinnerIcon, WarningIcon, } from "./icons.js";

package/lib/react/primitives.d.ts

@@ -12,7 +12,6 @@ interface CitationContextValue {
     status: CitationStatus;
     verification: Verification | null;
     config: {
-        hideKeySpan: boolean;
         fallbackDisplay: string | null;
         pendingContent: ReactNode;
     };
@@ -25,7 +24,6 @@ export interface CitationRootProps {
     citation: CitationType;
     verification?: Verification | null;
     children: ReactNode;
-    hideKeySpan?: boolean;
     fallbackDisplay?: string | null;
     pendingContent?: ReactNode;
 }

package/lib/react/primitives.js

@@ -20,7 +20,7 @@ export function useCitationContextSafe() {
     return useContext(CitationContext);
 }
 /** Root component that provides citation context to all child primitives. */
-export const CitationRoot = forwardRef(({ citation, verification = null, children, hideKeySpan = false, fallbackDisplay = null, pendingContent = "..", className, ...props }, ref) => {
+export const CitationRoot = forwardRef(({ citation, verification = null, children, fallbackDisplay = null, pendingContent = "..", className, ...props }, ref) => {
     const citationKey = useMemo(() => generateCitationKey(citation), [citation]);
     const citationInstanceId = useMemo(() => generateCitationInstanceId(citationKey), [citationKey]);
     const status = getCitationStatus(verification);
@@ -31,7 +31,6 @@ export const CitationRoot = forwardRef(({ citation, verification = null, childre
         status,
         verification,
         config: {
-            hideKeySpan,
             fallbackDisplay,
             pendingContent,
         },
@@ -41,11 +40,10 @@ export const CitationRoot = forwardRef(({ citation, verification = null, childre
         citationInstanceId,
         status,
         verification,
-        hideKeySpan,
         fallbackDisplay,
         pendingContent,
     ]);
-    return (_jsx(CitationContext.Provider, { value: contextValue, children: _jsx("span", { ref: ref, "data-citation-id": citationKey, "data-citation-instance": citationInstanceId, className: classNames("citation-root", className), ...props, children: children }) }));
+    return (_jsx(CitationContext.Provider, { value: contextValue, children: _jsx("span", { ref: ref, "data-citation-id": citationKey, "data-citation-instance": citationInstanceId, className: classNames("inline", className), ...props, children: children }) }));
 });
 CitationRoot.displayName = "Citation.Root";
 /** Interactive trigger component for the citation. */
@@ -83,13 +81,13 @@ export const CitationTrigger = forwardRef(({ children, className, onCitationClic
     }, [onTouchEnd, isMobile, onCitationTouchEnd, citation, citationKey]);
     const statusClasses = classNames(status.isVerified &&
         !status.isPartialMatch &&
-        "citation-trigger--verified", status.isPartialMatch && "citation-trigger--partial", status.isMiss && "citation-trigger--miss", status.isPending && "citation-trigger--pending");
-    return (_jsx("span", { ref: ref, role: "button", tabIndex: 0, className: classNames("citation-trigger", statusClasses, className), onClick: handleClick, onMouseDown: handleMouseDown, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onTouchEndCapture: isMobile ? handleTouchEnd : undefined, ...props, children: children }));
+        "text-green-600 dark:text-green-500", status.isPartialMatch && "text-amber-600 dark:text-amber-500", status.isMiss && "text-red-500 dark:text-red-400 line-through", status.isPending && "text-gray-400 dark:text-gray-500");
+    return (_jsx("span", { ref: ref, role: "button", tabIndex: 0, className: classNames("cursor-pointer transition-colors focus-visible:outline-2 focus-visible:outline-blue-500 focus-visible:outline-offset-2 focus-visible:rounded-sm", statusClasses, className), onClick: handleClick, onMouseDown: handleMouseDown, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onTouchEndCapture: isMobile ? handleTouchEnd : undefined, ...props, children: children }));
 });
 CitationTrigger.displayName = "Citation.Trigger";
 /** Bracket wrapper component for citation content. */
 export const CitationBracket = forwardRef(({ children, className, open = "[", close = "]", ...props }, ref) => {
-    return (_jsxs("span", { ref: ref, className: classNames("citation-bracket", className), "aria-hidden": "true", ...props, children: [_jsx("span", { className: "citation-bracket__open", children: open }), _jsx("span", { className: "citation-bracket__content", children: children }), _jsx("span", { className: "citation-bracket__close", children: close })] }));
+    return (_jsxs("span", { ref: ref, className: classNames("inline", className), "aria-hidden": "true", ...props, children: [_jsx("span", { className: "inline", children: open }), _jsx("span", { className: "inline", children: children }), _jsx("span", { className: "inline", children: close })] }));
 });
 CitationBracket.displayName = "Citation.Bracket";
 /** Displays the citation number. */
@@ -98,33 +96,28 @@ export const CitationNumber = forwardRef(({ className, number, ...props }, ref)
     const displayNumber = useMemo(() => {
         if (number !== undefined)
             return String(number);
-        if (!config.hideKeySpan) {
-            return (citation.keySpan?.toString() ||
-                citation.citationNumber?.toString() ||
-                config.fallbackDisplay ||
-                "");
-        }
-        return citation.citationNumber?.toString() || "";
+        return (citation.keySpan?.toString() ||
+            citation.citationNumber?.toString() ||
+            config.fallbackDisplay ||
+            "1");
     }, [number, citation, config]);
     if (status.isPending) {
-        return (_jsx("span", { ref: ref, className: classNames("citation-number citation-number--pending", className), ...props, children: config.pendingContent }));
+        return (_jsx("span", { ref: ref, className: classNames("font-medium opacity-60", className), ...props, children: config.pendingContent }));
     }
-    return (_jsx("span", { ref: ref, className: classNames("citation-number", className), ...props, children: displayNumber }));
+    return (_jsx("span", { ref: ref, className: classNames("font-medium", className), ...props, children: displayNumber }));
 });
 CitationNumber.displayName = "Citation.Number";
 /** Displays the citation keySpan (summary text). */
 export const CitationKeySpan = forwardRef(({ className, keySpan, separator = " ", ...props }, ref) => {
-    const { citation, config } = useCitationContext();
+    const { citation } = useCitationContext();
     const displayKeySpan = useMemo(() => {
         if (keySpan !== undefined)
             return keySpan;
-        if (config.hideKeySpan)
-            return "";
         return citation.keySpan?.toString() || "";
-    }, [keySpan, citation, config]);
+    }, [keySpan, citation]);
     if (!displayKeySpan)
         return null;
-    return (_jsxs("span", { ref: ref, className: classNames("citation-key-span", className), ...props, children: [displayKeySpan, separator] }));
+    return (_jsxs("span", { ref: ref, className: classNames("italic", className), ...props, children: [displayKeySpan, separator] }));
 });
 CitationKeySpan.displayName = "Citation.KeySpan";
 /** Displays a status indicator based on citation verification state. */
@@ -135,17 +128,18 @@ export const CitationIndicator = forwardRef(({ className, verifiedIndicator = "
             return true;
         return showFor.includes(state);
     }, [showFor]);
+    const baseClasses = "inline ml-0.5 text-[0.85em]";
     if (status.isPartialMatch && shouldShow("partial")) {
-        return (_jsx("span", { ref: ref, className: classNames("citation-indicator citation-indicator--partial", className), "aria-label": "Partial match", ...props, children: partialIndicator }));
+        return (_jsx("span", { ref: ref, className: classNames(baseClasses, "text-amber-600 dark:text-amber-500", className), "aria-label": "Partial match", ...props, children: partialIndicator }));
     }
     if (status.isVerified && !status.isPartialMatch && shouldShow("verified")) {
-        return (_jsx("span", { ref: ref, className: classNames("citation-indicator citation-indicator--verified", className), "aria-label": "Verified", ...props, children: verifiedIndicator }));
+        return (_jsx("span", { ref: ref, className: classNames(baseClasses, "text-green-600 dark:text-green-500", className), "aria-label": "Verified", ...props, children: verifiedIndicator }));
     }
     if (status.isMiss && shouldShow("miss") && missIndicator) {
-        return (_jsx("span", { ref: ref, className: classNames("citation-indicator citation-indicator--miss", className), "aria-label": "Not found", ...props, children: missIndicator }));
+        return (_jsx("span", { ref: ref, className: classNames(baseClasses, "text-red-500 dark:text-red-400", className), "aria-label": "Not found", ...props, children: missIndicator }));
     }
     if (status.isPending && shouldShow("pending") && pendingIndicator) {
-        return (_jsx("span", { ref: ref, className: classNames("citation-indicator citation-indicator--pending", className), "aria-label": "Pending", ...props, children: pendingIndicator }));
+        return (_jsx("span", { ref: ref, className: classNames(baseClasses, "text-gray-400 dark:text-gray-500", className), "aria-label": "Pending", ...props, children: pendingIndicator }));
     }
     return null;
 });
@@ -167,7 +161,7 @@ export const CitationPhrase = forwardRef(({ className, maxLength, truncationSuff
     }, [citation.fullPhrase, maxLength, truncationSuffix]);
     if (!displayPhrase)
         return null;
-    return (_jsx("span", { ref: ref, className: classNames("citation-phrase", className), ...props, children: displayPhrase }));
+    return (_jsx("span", { ref: ref, className: classNames("italic", className), ...props, children: displayPhrase }));
 });
 CitationPhrase.displayName = "Citation.Phrase";
 /** Displays the citation's page number. */
@@ -176,7 +170,7 @@ export const CitationPage = forwardRef(({ className, prefix = "", ...props }, re
     if (citation.pageNumber === undefined || citation.pageNumber === null) {
         return null;
     }
-    return (_jsxs("span", { ref: ref, className: classNames("citation-page", className), ...props, children: [prefix, citation.pageNumber] }));
+    return (_jsxs("span", { ref: ref, className: classNames("text-xs text-gray-400 dark:text-gray-500", className), ...props, children: [prefix, citation.pageNumber] }));
 });
 CitationPage.displayName = "Citation.Page";
 /** Citation primitives namespace for composable citation components. */

package/lib/react/types.d.ts

@@ -2,16 +2,34 @@ import type { Citation, CitationStatus } from "../types/citation.js";
 import type { Verification } from "../types/verification.js";
 import type { SearchStatus } from "../types/search.js";
 /**
- * Available citation display variants.
+ * Visual style variants for citations.
  *
- * - `brackets`: Shows keySpan/number in brackets with blue text styling (default).
- *               Use hideKeySpan=true for numeric-only display.
- *               Use hideBrackets=true 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
+ * | Variant       | Description                                    |
+ * |---------------|------------------------------------------------|
+ * | `chip`        | Pill/badge style with background color         |
+ * | `brackets`    | [text✓] with square brackets (default)         |
+ * | `text`        | Plain text, inherits parent styling            |
+ * | `superscript` | Small raised text like footnotes¹              |
+ * | `minimal`     | Compact text with indicator, truncated         |
  */
-export type CitationVariant = "brackets" | "text" | "minimal" | "indicator";
+export type CitationVariant = "chip" | "brackets" | "text" | "superscript" | "minimal";
+/**
+ * Content to display in the citation.
+ *
+ * | Content       | Description                                    |
+ * |---------------|------------------------------------------------|
+ * | `keySpan`     | Descriptive text (e.g., "Revenue Growth")      |
+ * | `number`      | Citation number (e.g., "1", "2", "3")          |
+ * | `indicator`   | Only the status icon (✓/⚠), no text            |
+ *
+ * Default content per variant:
+ * - `chip` → `keySpan`
+ * - `brackets` → `number`
+ * - `text` → `keySpan`
+ * - `superscript` → `number`
+ * - `minimal` → `number`
+ */
+export type CitationContent = "keySpan" | "number" | "indicator";
 /**
  * URL fetch status for URL citations.
  */
@@ -91,19 +109,33 @@ export interface BaseCitationProps {
     /** Class name for controlling inner content width */
     innerWidthClassName?: string;
     /**
-     * When true, hides keySpan and displays citation number only. When false, displays keySpan text.
-     * @default false
+     * Visual style variant for the citation.
+     * @default "brackets"
+     */
+    variant?: CitationVariant;
+    /**
+     * What content to display in the citation.
+     * If not specified, defaults based on variant:
+     * - `chip` → `keySpan`
+     * - `brackets` → `number`
+     * - `text` → `keySpan`
+     * - `superscript` → `number`
+     * - `minimal` → `number`
      */
-    hideKeySpan?: boolean;
+    content?: CitationContent;
     /** Fallback display text when citation keySpan is empty */
     fallbackDisplay?: string | null;
-    /** Display variant for the citation */
-    variant?: CitationVariant;
 }
+/**
+ * Visual style variants for URL citations.
+ */
+export type UrlCitationVariant = "chip" | "inline" | "bracket";
 /**
  * Props for URL citation component
  */
-export interface UrlCitationProps extends Omit<BaseCitationProps, "citation"> {
+export interface UrlCitationProps extends Omit<BaseCitationProps, "citation" | "variant"> {
+    /** Visual style variant for the URL citation */
+    variant?: UrlCitationVariant;
     /** URL metadata including fetch status */
     urlMeta: UrlCitationMeta;
     /** The citation data (optional, will be derived from urlMeta if not provided) */

package/lib/react/utils.d.ts

@@ -19,18 +19,19 @@ export declare function generateVerificationKey(verification: Verification): str
  */
 export declare function generateCitationInstanceId(citationKey: string): string;
 /**
- * Gets the display text for a citation based on configuration.
+ * Gets the display text for a citation (keySpan with fallback to number).
  */
 export declare function getCitationDisplayText(citation: Citation, options?: {
-    hideKeySpan?: boolean;
     fallbackDisplay?: string | null;
 }): string;
 /**
- * Gets the keySpan text to display before the citation bracket.
+ * Gets the citation number as a string.
  */
-export declare function getCitationKeySpanText(citation: Citation, options?: {
-    hideKeySpan?: boolean;
-}): string;
+export declare function getCitationNumber(citation: Citation): string;
+/**
+ * Gets the keySpan text from a citation.
+ */
+export declare function getCitationKeySpanText(citation: Citation): string;
 /**
  * Joins class names, filtering out falsy values.
  * This is a minimal implementation for the base component.

package/lib/react/utils.js

@@ -53,26 +53,25 @@ export function generateCitationInstanceId(citationKey) {
     return `${citationKey}-${randomSuffix}`;
 }
 /**
- * Gets the display text for a citation based on configuration.
+ * Gets the display text for a citation (keySpan with fallback to number).
  */
 export function getCitationDisplayText(citation, options = {}) {
-    const { hideKeySpan = false, fallbackDisplay } = options;
-    if (!hideKeySpan) {
-        return (citation.keySpan?.toString() ||
-            citation.citationNumber?.toString() ||
-            fallbackDisplay ||
-            "");
-    }
-    return citation.citationNumber?.toString() || "";
+    const { fallbackDisplay } = options;
+    return (citation.keySpan?.toString() ||
+        citation.citationNumber?.toString() ||
+        fallbackDisplay ||
+        "1");
 }
 /**
- * Gets the keySpan text to display before the citation bracket.
+ * Gets the citation number as a string.
  */
-export function getCitationKeySpanText(citation, options = {}) {
-    const { hideKeySpan = false } = options;
-    if (!hideKeySpan) {
-        return "";
-    }
+export function getCitationNumber(citation) {
+    return citation.citationNumber?.toString() || "1";
+}
+/**
+ * Gets the keySpan text from a citation.
+ */
+export function getCitationKeySpanText(citation) {
     return citation.keySpan?.toString() || "";
 }
 /**

package/package.json

@@ -1,15 +1,18 @@
 {
     "name": "@deepcitation/deepcitation-js",
-    "version": "1.1.25",
+    "version": "1.1.27",
     "description": "DeepCitation JavaScript SDK for deterministic AI citation verification",
     "type": "module",
     "private": false,
     "license": "MIT",
     "author": "DeepCitation <opensource@deepcitation.com>",
+    "homepage": "https://deepcitation.com",
+    "bugs": {
+        "url": "https://github.com/deepcitation/deepcitation-js/issues"
+    },
     "repository": {
         "type": "git",
-        "url": "git+https://github.com/deepcitation/deepcitation-js.git",
-        "directory": "packages/deepcitation"
+        "url": "git+https://github.com/deepcitation/deepcitation-js.git"
     },
     "main": "./lib/index.js",
     "types": "./lib/index.d.ts",
@@ -76,10 +79,24 @@
             "import": "./lib/index.js",
             "require": "./lib/index.js"
         },
+        "./client": {
+            "types": "./lib/client/index.d.ts",
+            "import": "./lib/client/index.js",
+            "require": "./lib/client/index.js"
+        },
+        "./prompts": {
+            "types": "./lib/prompts/index.d.ts",
+            "import": "./lib/prompts/index.js",
+            "require": "./lib/prompts/index.js"
+        },
         "./react": {
             "types": "./lib/react/index.d.ts",
             "import": "./lib/react/index.js",
             "require": "./lib/react/index.js"
+        },
+        "./types": {
+            "types": "./lib/types/index.d.ts",
+            "import": "./lib/types/index.js"
         }
     },
     "keywords": [