{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "relation-section",
  "title": "Relation Section",
  "description": "Collapsible section for displaying and managing ContentGrid entity relations.",
  "dependencies": ["lucide-react"],
  "registryDependencies": [
    "alert-dialog",
    "badge",
    "button",
    "card",
    "collapsible",
    "skeleton",
    "table",
    "tooltip",
    "utils"
  ],
  "files": [
    {
      "path": "src/patterns/relation-section/relation-section.tsx",
      "content": "import { useState } from \"react\";\nimport { ChevronDown, ExternalLink, LinkIcon, Plus, Unlink } from \"lucide-react\";\nimport { cn, formatCellValue } from \"../../lib/utils\";\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n} from \"../../primitives/alert-dialog\";\nimport { Badge } from \"../../primitives/badge\";\nimport { Button } from \"../../primitives/button\";\nimport { Card, CardContent, CardHeader } from \"../../primitives/card\";\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from \"../../primitives/collapsible\";\nimport { Skeleton } from \"../../primitives/skeleton\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"../../primitives/table\";\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"../../primitives/tooltip\";\n\n// ---------------------------------------------------------------------------\n// Public types\n// ---------------------------------------------------------------------------\n\n/** A single related item row */\nexport interface RelationItem {\n  /** Unique identifier for this related item */\n  id: string;\n  /** Attribute data keyed by attribute name */\n  data: Record<string, unknown>;\n}\n\n/** Column descriptor for the relation table */\nexport interface RelationColumn {\n  /** Attribute name used to look up values in RelationItem.data */\n  key: string;\n  /** Human-readable column header */\n  title: string;\n}\n\nexport interface RelationSectionProps {\n  /** Human-readable relation title, e.g. \"Invoices\" */\n  title: string;\n  /** When true the section renders the to-one (many-to-one) compact card layout */\n  isManyToOne?: boolean;\n  /** Loaded relation items; undefined while loading */\n  items?: RelationItem[];\n  /** Column definitions; when empty the section falls back to rendering data keys */\n  columns?: RelationColumn[];\n  /** True while the relation data is being fetched */\n  isLoading?: boolean;\n  /** Non-null when the relation data failed to load */\n  error?: unknown;\n  /** True while an unlink mutation is in progress */\n  isUnlinking?: boolean;\n  /** Called when the user confirms unlinking an item */\n  onUnlink?: (id: string) => void;\n  /** Called when the user clicks the \"Link\" / \"Change\" button */\n  onLink?: () => void;\n  /** Called when the user clicks the detail / external-link icon for an item */\n  onViewItem?: (id: string) => void;\n}\n\n// ---------------------------------------------------------------------------\n// Helpers\n// ---------------------------------------------------------------------------\n\nfunction getItemLabel(item: RelationItem): string {\n  const firstVal = Object.entries(item.data).find(\n    ([k, v]) => !k.startsWith(\"_\") && k !== \"id\" && v != null,\n  );\n  return firstVal ? String(firstVal[1]) : item.id;\n}\n\nfunction resolveColumnKeys(items: RelationItem[], columns?: RelationColumn[]): string[] {\n  if (columns && columns.length > 0) {\n    return columns.map((c) => c.key).filter((k) => items[0] && k in items[0].data);\n  }\n  if (!items[0]) return [];\n  return Object.keys(items[0].data).filter((k) => !k.startsWith(\"_\") && k !== \"id\");\n}\n\nfunction getColumnTitle(key: string, columns?: RelationColumn[]): string {\n  const col = columns?.find((c) => c.key === key);\n  if (col) return col.title;\n  return key.replaceAll(\"_\", \" \").replace(/\\b\\w/g, (c) => c.toUpperCase());\n}\n\n// ---------------------------------------------------------------------------\n// Main export\n// ---------------------------------------------------------------------------\n\nexport function RelationSection({\n  title,\n  isManyToOne,\n  items,\n  columns,\n  isLoading,\n  error,\n  isUnlinking,\n  onUnlink,\n  onLink,\n  onViewItem,\n}: Readonly<RelationSectionProps>) {\n  const [unlinkTarget, setUnlinkTarget] = useState<{ id: string; label: string } | null>(null);\n\n  const hasItems = !isLoading && !error && items && items.length > 0;\n  const columnKeys = hasItems ? resolveColumnKeys(items, columns) : [];\n\n  function handleUnlink() {\n    if (!unlinkTarget) return;\n    onUnlink?.(unlinkTarget.id);\n    setUnlinkTarget(null);\n  }\n\n  const unlinkDialog = onUnlink ? (\n    <AlertDialog\n      open={unlinkTarget !== null}\n      onOpenChange={(open) => !open && setUnlinkTarget(null)}\n    >\n      <AlertDialogContent size=\"sm\">\n        <AlertDialogHeader>\n          <AlertDialogTitle>Unlink {title.toLowerCase()}</AlertDialogTitle>\n          <AlertDialogDescription>\n            Remove the link to &ldquo;{unlinkTarget?.label}&rdquo;? This will not delete the{\" \"}\n            {title.toLowerCase()} itself.\n          </AlertDialogDescription>\n        </AlertDialogHeader>\n        <AlertDialogFooter>\n          <AlertDialogCancel>Cancel</AlertDialogCancel>\n          <AlertDialogAction variant=\"destructive\" onClick={handleUnlink} disabled={isUnlinking}>\n            {isUnlinking ? \"Unlinking...\" : \"Unlink\"}\n          </AlertDialogAction>\n        </AlertDialogFooter>\n      </AlertDialogContent>\n    </AlertDialog>\n  ) : null;\n\n  // -------------------------------------------------------------------------\n  // Many-to-one layout: compact card\n  // -------------------------------------------------------------------------\n  if (isManyToOne) {\n    return (\n      <TooltipProvider>\n        <Card className=\"py-4 gap-3\">\n          <CardHeader className=\"pb-0\">\n            <div className=\"flex items-center justify-between\">\n              <h3 className=\"text-sm font-semibold\">{title}</h3>\n              {hasItems && onLink && (\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"text-muted-foreground\"\n                  onClick={onLink}\n                >\n                  <Plus className=\"size-4\" />\n                  Change\n                </Button>\n              )}\n            </div>\n          </CardHeader>\n          <CardContent>\n            {isLoading && (\n              <div className=\"space-y-3\">\n                <Skeleton className=\"h-12 w-full rounded-lg\" />\n              </div>\n            )}\n            {!!error && <p className=\"text-sm text-destructive\">Failed to load relation data.</p>}\n            {!isLoading && !error && !hasItems && (\n              <div className=\"flex flex-col items-center gap-4 rounded-lg border border-dashed py-10\">\n                <div className=\"bg-muted rounded-full p-3\">\n                  <LinkIcon className=\"text-muted-foreground size-6\" />\n                </div>\n                <div className=\"text-center\">\n                  <p className=\"text-sm font-medium\">No {title.toLowerCase()} linked</p>\n                  <p className=\"text-muted-foreground mt-1 text-xs\">\n                    Link a {title.toLowerCase()} to this item\n                  </p>\n                </div>\n                {onLink && (\n                  <Button variant=\"outline\" size=\"sm\" onClick={onLink}>\n                    <Plus className=\"size-4\" />\n                    Link {title}\n                  </Button>\n                )}\n              </div>\n            )}\n            {hasItems &&\n              items.map((item) => {\n                const label = getItemLabel(item);\n                return (\n                  <div key={item.id} className=\"flex items-center gap-4 rounded-lg border p-4\">\n                    <div className=\"min-w-0 flex-1\">\n                      <p className=\"truncate text-sm font-medium\">{label}</p>\n                      <div className=\"text-muted-foreground mt-1 flex flex-wrap gap-x-4 gap-y-0.5 text-xs\">\n                        {columnKeys\n                          .filter((k) => item.data[k] != null)\n                          .slice(0, 3)\n                          .map((key) => (\n                            <span key={key}>\n                              {getColumnTitle(key, columns)}: {String(item.data[key])}\n                            </span>\n                          ))}\n                      </div>\n                    </div>\n                    <div className=\"flex shrink-0 items-center gap-1\">\n                      {onViewItem && (\n                        <Tooltip>\n                          <TooltipTrigger asChild>\n                            <Button\n                              variant=\"ghost\"\n                              size=\"icon-sm\"\n                              className=\"text-muted-foreground hover:text-foreground\"\n                              onClick={() => onViewItem(item.id)}\n                            >\n                              <ExternalLink className=\"size-4\" />\n                              <span className=\"sr-only\">View details</span>\n                            </Button>\n                          </TooltipTrigger>\n                          <TooltipContent>View details</TooltipContent>\n                        </Tooltip>\n                      )}\n                      {onUnlink && (\n                        <Tooltip>\n                          <TooltipTrigger asChild>\n                            <Button\n                              variant=\"ghost\"\n                              size=\"icon-sm\"\n                              className=\"text-muted-foreground hover:text-destructive\"\n                              onClick={() => setUnlinkTarget({ id: item.id, label })}\n                            >\n                              <Unlink className=\"size-4\" />\n                              <span className=\"sr-only\">Unlink</span>\n                            </Button>\n                          </TooltipTrigger>\n                          <TooltipContent>Unlink</TooltipContent>\n                        </Tooltip>\n                      )}\n                    </div>\n                  </div>\n                );\n              })}\n          </CardContent>\n        </Card>\n        {unlinkDialog}\n      </TooltipProvider>\n    );\n  }\n\n  // -------------------------------------------------------------------------\n  // Many-to-many layout: collapsible table\n  // -------------------------------------------------------------------------\n  const itemCount = items?.length ?? 0;\n\n  return (\n    <TooltipProvider>\n      <Card className=\"py-4 gap-4\">\n        {!isLoading && !error && !hasItems ? (\n          <>\n            <CardHeader className=\"pb-0\">\n              <div className=\"flex items-center justify-between\">\n                <h3 className=\"text-sm font-semibold\">{title}</h3>\n              </div>\n            </CardHeader>\n            <CardContent>\n              <div className=\"flex flex-col items-center gap-4 rounded-lg border border-dashed py-10\">\n                <div className=\"bg-muted rounded-full p-3\">\n                  <LinkIcon className=\"text-muted-foreground size-6\" />\n                </div>\n                <div className=\"text-center\">\n                  <p className=\"text-sm font-medium\">No {title.toLowerCase()} linked</p>\n                  <p className=\"text-muted-foreground mt-1 text-xs\">\n                    Link one or more {title.toLowerCase()} to this item\n                  </p>\n                </div>\n                {onLink && (\n                  <Button variant=\"outline\" size=\"sm\" onClick={onLink}>\n                    <Plus className=\"size-4\" />\n                    Link {title}\n                  </Button>\n                )}\n              </div>\n            </CardContent>\n          </>\n        ) : (\n          <Collapsible defaultOpen>\n            <CardHeader className=\"pb-0\">\n              <div className=\"flex items-center justify-between\">\n                <CollapsibleTrigger className=\"flex items-center gap-2 rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 [&[data-state=open]>svg.chevron]:rotate-180\">\n                  <h3 className=\"text-sm font-semibold\">{title}</h3>\n                  {!isLoading && !error && (\n                    <Badge variant=\"secondary\" className=\"text-xs\">\n                      {itemCount}\n                    </Badge>\n                  )}\n                  <ChevronDown\n                    className={cn(\n                      \"chevron text-muted-foreground size-4 transition-transform duration-200\",\n                    )}\n                  />\n                </CollapsibleTrigger>\n                {hasItems && onLink && (\n                  <Button variant=\"outline\" size=\"sm\" onClick={onLink}>\n                    <Plus className=\"size-4\" />\n                    Link {title}\n                  </Button>\n                )}\n              </div>\n            </CardHeader>\n            <CollapsibleContent>\n              <CardContent>\n                {isLoading && (\n                  <div className=\"space-y-3\">\n                    <Skeleton className=\"h-12 w-full rounded-lg\" />\n                    <Skeleton className=\"h-12 w-2/3 rounded-lg\" />\n                  </div>\n                )}\n                {!!error && (\n                  <p className=\"text-sm text-destructive\">Failed to load relation data.</p>\n                )}\n                {hasItems && (\n                  <div className=\"rounded-md border\">\n                    <Table>\n                      <TableHeader>\n                        <TableRow>\n                          {columnKeys.map((key) => (\n                            <TableHead key={key}>{getColumnTitle(key, columns)}</TableHead>\n                          ))}\n                          <TableHead className=\"w-10\" />\n                        </TableRow>\n                      </TableHeader>\n                      <TableBody>\n                        {items.map((item) => (\n                          <TableRow\n                            key={item.id}\n                            className={cn(onViewItem && \"cursor-pointer hover:bg-muted/50\")}\n                            onClick={onViewItem ? () => onViewItem(item.id) : undefined}\n                          >\n                            {columnKeys.map((key) => (\n                              <TableCell key={key}>{formatCellValue(item.data[key])}</TableCell>\n                            ))}\n                            <TableCell>\n                              {onUnlink && (\n                                <Tooltip>\n                                  <TooltipTrigger asChild>\n                                    <Button\n                                      variant=\"ghost\"\n                                      size=\"icon-xs\"\n                                      className=\"text-muted-foreground hover:text-destructive\"\n                                      onClick={(e) => {\n                                        e.stopPropagation();\n                                        setUnlinkTarget({\n                                          id: item.id,\n                                          label: getItemLabel(item),\n                                        });\n                                      }}\n                                    >\n                                      <Unlink className=\"size-3\" />\n                                      <span className=\"sr-only\">Unlink</span>\n                                    </Button>\n                                  </TooltipTrigger>\n                                  <TooltipContent>Unlink</TooltipContent>\n                                </Tooltip>\n                              )}\n                            </TableCell>\n                          </TableRow>\n                        ))}\n                      </TableBody>\n                    </Table>\n                  </div>\n                )}\n              </CardContent>\n            </CollapsibleContent>\n          </Collapsible>\n        )}\n      </Card>\n      {unlinkDialog}\n    </TooltipProvider>\n  );\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "src/patterns/relation-section/index.ts",
      "content": "export { RelationSection } from \"./relation-section\";\nexport type { RelationSectionProps, RelationItem, RelationColumn } from \"./relation-section\";\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}