{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "source-card",
  "title": "Source Card",
  "description": "One retrieved passage: where it came from, what it said, and how well it matched.",
  "dependencies": [
    "lucide-react@^1.31.0"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/default/source-card/source-card.tsx",
      "content": "import * as React from \"react\"\nimport { ExternalLink } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport type SourceCardProps = Omit<\n  React.HTMLAttributes<HTMLElement>,\n  \"title\" | \"children\"\n> & {\n  title: React.ReactNode\n  /** Makes the title a link. Opens in a new tab. */\n  url?: string\n  /** The retrieved passage. */\n  snippet?: React.ReactNode\n  /** Where it came from: a site, a file, a collection. */\n  source?: React.ReactNode\n  /** Position in the result list, shown as a marker. */\n  index?: number\n  /** Relevance from 0 to 1, shown as a bar and a percentage. */\n  score?: number\n  icon?: React.ReactNode\n  footer?: React.ReactNode\n}\n\nfunction hostOf(url: string) {\n  try {\n    return new URL(url).hostname.replace(/^www\\./, \"\")\n  } catch {\n    return undefined\n  }\n}\n\nexport function SourceCard({\n  title,\n  url,\n  snippet,\n  source,\n  index,\n  score,\n  icon,\n  footer,\n  className,\n  ...rootProps\n}: SourceCardProps) {\n  const origin = source ?? (url ? hostOf(url) : undefined)\n  const percent =\n    score === undefined\n      ? undefined\n      : Math.round(Math.min(1, Math.max(0, score)) * 100)\n\n  return (\n    <article\n      data-slot=\"source-card\"\n      className={cn(\n        \"border-border bg-card/40 hover:bg-card min-w-0 rounded-[calc(var(--radius)+0.15rem)] border p-3 transition-colors duration-150 motion-reduce:transition-none\",\n        className\n      )}\n      {...rootProps}\n    >\n      <div className=\"flex items-start gap-2.5\">\n        {index !== undefined ? (\n          <span\n            aria-hidden=\"true\"\n            className=\"border-border text-muted-foreground mt-0.5 flex size-5 shrink-0 items-center justify-center rounded border font-[family-name:var(--font-mono),monospace] text-[0.625rem]\"\n          >\n            {index}\n          </span>\n        ) : null}\n\n        {icon ? <span className=\"mt-0.5 shrink-0\">{icon}</span> : null}\n\n        <div className=\"min-w-0 flex-1\">\n          <h3 className=\"text-foreground text-sm leading-snug font-medium\">\n            {url ? (\n              <a\n                href={url}\n                target=\"_blank\"\n                rel=\"noreferrer noopener\"\n                className=\"hover:text-primary inline-flex items-baseline gap-1 underline-offset-2 hover:underline\"\n              >\n                {title}\n                <ExternalLink\n                  aria-hidden=\"true\"\n                  size={12}\n                  className=\"shrink-0 self-center\"\n                />\n                <span className=\"sr-only\">(opens in a new tab)</span>\n              </a>\n            ) : (\n              title\n            )}\n          </h3>\n\n          {origin ? (\n            <p className=\"text-muted-foreground mt-0.5 truncate text-xs\">\n              {origin}\n            </p>\n          ) : null}\n\n          {snippet ? (\n            <p className=\"text-muted-foreground mt-1.5 text-sm leading-relaxed\">\n              {snippet}\n            </p>\n          ) : null}\n\n          {percent !== undefined ? (\n            <div className=\"mt-2 flex items-center gap-2\">\n              <span\n                aria-hidden=\"true\"\n                className=\"bg-muted h-1 w-16 shrink-0 overflow-hidden rounded-full\"\n              >\n                <span\n                  className=\"bg-primary block h-full rounded-full\"\n                  style={{ width: `${percent}%` }}\n                />\n              </span>\n              <span className=\"text-muted-foreground font-[family-name:var(--font-mono),monospace] text-[0.6875rem] tabular-nums\">\n                {percent}% match\n              </span>\n            </div>\n          ) : null}\n\n          {footer ? <div className=\"mt-2\">{footer}</div> : null}\n        </div>\n      </div>\n    </article>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "categories": [
    "ai",
    "agent",
    "rag",
    "citation"
  ],
  "type": "registry:ui"
}