{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "inline-citation",
  "title": "Inline Citation",
  "description": "Numbered citations inside a sentence, with a preview on hover.",
  "dependencies": [],
  "registryDependencies": [
    "utils",
    "https://ui.cuelark.com/r/theme.json",
    "https://ui.cuelark.com/r/hover-card.json",
    "https://ui.cuelark.com/r/sources.json"
  ],
  "files": [
    {
      "path": "src/registry/cuelark/ui/inline-citation.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { HoverCard, HoverCardContent, HoverCardTrigger } from \"@/registry/cuelark/ui/hover-card\";\nimport { SourceTile } from \"@/registry/cuelark/ui/sources\";\nimport { cn } from \"@/lib/utils\";\n\ntype InlineCitationProps = {\n  index: number;\n  source: { title: string; url: string; excerpt?: string };\n  className?: string;\n};\n\n/**\n * A numbered citation inside a sentence. Hover or focus previews the source (title, domain, the quoted passage);\n * click opens it. The chip highlights the claim it backs so readers see exactly what is sourced.\n */\nfunction InlineCitation({ index, source, className }: InlineCitationProps) {\n  const domain = (() => {\n    try {\n      return new URL(source.url).hostname.replace(/^www\\./, \"\");\n    } catch {\n      return source.url;\n    }\n  })();\n  return (\n    <HoverCard openDelay={120} closeDelay={80}>\n      <HoverCardTrigger asChild>\n        <a\n          href={source.url}\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          data-slot=\"inline-citation\"\n          aria-label={`Source ${index}: ${source.title}`}\n          className={cn(\n            \"mx-0.5 inline-grid h-4 min-w-4 -translate-y-px place-items-center rounded-[5px] bg-muted px-1 align-middle font-mono text-[0.625rem] font-medium text-muted-foreground no-underline ring-1 ring-border outline-none transition-colors hover:bg-signal hover:text-signal-foreground hover:ring-transparent focus-visible:ring-3 focus-visible:ring-ring/50\",\n            className,\n          )}\n        >\n          {index}\n        </a>\n      </HoverCardTrigger>\n      <HoverCardContent className=\"grid w-80 gap-2 p-3.5\">\n        <div className=\"flex items-center gap-2\">\n          <SourceTile url={source.url} />\n          <span className=\"truncate font-mono text-xs text-muted-foreground\">{domain}</span>\n        </div>\n        <p className=\"text-sm leading-snug font-medium\">{source.title}</p>\n        {source.excerpt && <blockquote className=\"border-s-2 border-signal ps-2.5 text-xs leading-relaxed text-muted-foreground\">“{source.excerpt}”</blockquote>}\n      </HoverCardContent>\n    </HoverCard>\n  );\n}\n\nexport { InlineCitation };\nexport type { InlineCitationProps };\n",
      "type": "registry:ui"
    }
  ],
  "docs": "Docs and examples: https://ui.cuelark.com/components/inline-citation",
  "categories": [
    "agents"
  ],
  "type": "registry:ui"
}